Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법-View.js-php.cn

Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법

王林

풀어 주다： 2023-07-21 17:09:20

원래의

2326명이 탐색했습니다.

Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법

소개:
웹 애플리케이션이 발전하면서 데이터 드래그 및 정렬 기능은 많은 애플리케이션에서 필수적인 부분이 되었습니다. 최신 JavaScript 프레임워크인 Vue.js는 편리한 데이터 바인딩 및 컴포넌트 기반 개발 방법을 제공하며, Element-UI는 Vue.js 기반의 UI 프레임워크로서 일련의 뛰어난 컴포넌트 및 인터랙티브 효과를 제공합니다. 이 기사에서는 Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법을 소개하고 샘플 코드를 제공합니다.

준비
시작하기 전에 관련 개발 환경을 준비해야 합니다. 먼저 Node.js와 npm이 설치되어 있는지 확인하세요. 그런 다음 npm을 통해 Vue 및 Element-UI를 설치하십시오.
```
npm install vue
npm install element-ui
```
로그인 후 복사
설치가 완료되면 새로운 Vue 프로젝트를 생성하고 Element-UI 라이브러리를 소개합니다.
```
vue create drag-sort-demo
cd drag-sort-demo
npm install element-ui
```
로그인 후 복사
다음으로 Vue의 항목 파일 main.js에 Vue 및 Element-UI를 도입하고 Vue.use() 메서드를 사용하여 Element-UI 구성 요소를 등록합니다.
```
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')
```
로그인 후 복사
이제 준비 작업이 완료되었으며 다음으로 데이터 드래그 및 정렬 기능 구현을 시작하겠습니다.
데이터 목록 구현
먼저 드래그 가능하고 정렬 가능한 데이터 항목을 표시하기 위한 데이터 목록을 만들어야 합니다. Vue 구성 요소에서는 v-for 지시문을 사용하여 데이터 목록을 탐색하고 el-card 구성 요소를 사용하여 각 데이터 항목을 표시할 수 있습니다.
```
<template>
  <div>
 <el-card v-for="item in list" :key="item.id">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  data() {
 return {
   list: [
     { id: 1, name: '数据项1' },
     { id: 2, name: '数据项2' },
     { id: 3, name: '数据项3' },
     { id: 4, name: '数据项4' },
     { id: 5, name: '数据项5' }
   ]
 }
  }
}
</script>
```
로그인 후 복사
이제 데이터 목록 표시가 완료되었습니다.
드래그 앤 드롭 기능 추가
다음으로 각 데이터 항목에 드래그 앤 드롭 기능을 추가하겠습니다. Element-UI에서는 el-draggable 지시문을 사용하여 드래그 앤 드롭 기능을 구현할 수 있습니다. el-draggable 지시문을 el-card 구성 요소에 추가하고 데이터 항목과 관련된 속성을 바인딩할 수 있습니다.
```
<template>
  <div>
 <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  // ...
  directives: {
 'el-draggable': {
   bind(el, binding, vnode) {
     el.draggable = true
     el.addEventListener('dragstart', (event) => {
       event.dataTransfer.setData('text/plain', JSON.stringify(binding.value))
     })
   }
 }
  }
}
</script>
```
로그인 후 복사
el-draggable 지시어에서 요소의 draggable 속성을 true로 설정하여 드래그 기능을 활성화했습니다. 그런 다음 dragstart 이벤트에서 현재 데이터 항목의 값을 JSON 문자열로 DataTransfer 개체에 저장합니다.
정렬 기능 추가
드래그 앤 드롭 기능 외에도 데이터 항목을 지정된 위치로 드래그한 후 정렬 기능도 구현해야 합니다. Element-UI에서는 el-dropzone 지시문을 사용하여 정렬 기능을 구현할 수 있습니다. el-card 컴포넌트가 위치한 컨테이너에 el-dropzone 지시문을 추가하고 데이터 목록과 관련된 속성을 바인딩할 수 있습니다.
```
<template>
  <div v-el-dropzone="list">
 <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
   {{ item.name }}
 </el-card>
  </div>
</template>

<script>
export default {
  // ...
  directives: {
 'el-draggable': {
   // ...
   bind(el, binding, vnode) {
     // ...
     el.addEventListener('dragend', () => {
       vnode.context.$forceUpdate();
     })
   }
 },
 'el-dropzone': {
   bind(el, binding, vnode) {
     el.addEventListener('dragover', (event) => {
       event.preventDefault()
     })
     el.addEventListener('drop', (event) => {
       event.preventDefault()
       const draggedItem = JSON.parse(event.dataTransfer.getData('text/plain'))
       const newList = binding.value.slice()
       const index = newList.findIndex(item => item.id === draggedItem.id)
       newList.splice(index, 1)
       newList.splice(el.dataset.index, 0, draggedItem)
       vnode.context[binding.expression] = newList
     })
   }
 }
  }
}
</script>
```
로그인 후 복사
el-dropzone 지시어에서는 브라우저의 기본 드래그 앤 드롭 동작을 방지하기 위해 dragover 이벤트에서 PreventDefault 메소드를 호출합니다. 그런 다음 드롭 이벤트에서 드래그된 데이터 항목을 가져오고 해당 ID를 기반으로 원본 데이터 목록에서 해당 위치를 찾습니다. 그런 다음 데이터 목록의 새 복사본을 만들고 여기에서 끌어온 데이터 항목을 제거한 다음 지정된 위치에 데이터 항목을 삽입합니다. 마지막으로 Vue 인스턴스에서 해당 데이터 속성을 수정하여 데이터 목록을 업데이트합니다.
효과 표시

위 단계를 구현한 후 데이터 드래그 및 정렬 기능 개발이 완료되었습니다. 이제 프로젝트를 실행하고 효과를 확인할 수 있습니다.

npm run serve

로그인 후 복사

브라우저를 열고 http://localhost:8080에 접속하시면 드래그 앤 드롭과 정렬 기능이 있는 데이터 목록을 보실 수 있습니다.

결론:
이 기사에서는 Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법을 자세히 설명합니다. el-draggable 및 el-dropzone 지시어를 사용하면 데이터 목록에 드래그 및 정렬 기능을 쉽게 추가할 수 있습니다. 이 글이 웹 애플리케이션을 개발하는 개발자들에게 이 공통 기능을 보다 효율적으로 구현할 수 있도록 도움이 되기를 바랍니다.

참조 링크: