집 > 기사 > 웹 프론트엔드 > Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법

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

王林원래의: 2023-07-21 17:09:202235검색

소개:
웹 애플리케이션이 발전하면서 데이터 드래그 및 정렬 기능은 많은 애플리케이션에서 필수적인 부분이 되었습니다. 최신 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 지시어를 사용하면 데이터 목록에 드래그 및 정렬 기능을 쉽게 추가할 수 있습니다. 이 글이 웹 애플리케이션을 개발하는 개발자들에게 이 공통 기능을 보다 효율적으로 구현할 수 있도록 도움이 되기를 바랍니다.

참조 링크:

Vue 공식 문서: https://cn.vuejs.org/
Element-UI 공식 문서: https://element.eleme.io/

위 내용은 Vue 및 Element-UI를 사용하여 데이터 드래그 및 정렬 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript node.js json vue.js npm for 字符串 JS 对象事件 http https ui

성명：

이전 기사：Vue에서 라우팅을 사용하여 로그인 인증 및 페이지 점프 논리를 구현하는 방법은 무엇입니까?다음 기사：Vue에서 라우팅을 사용하여 로그인 인증 및 페이지 점프 논리를 구현하는 방법은 무엇입니까?