如何使用Vue和Element-UI實現資料拖曳和排序功能-Vue.js-PHP中文網

如何使用Vue和Element-UI實現資料拖曳和排序功能

王林

發布： 2023-07-21 17:09:20

原創

2307 人瀏覽過

如何使用Vue和Element-UI實現資料拖曳和排序功能

引言：
隨著Web應用程式的發展，資料拖曳和排序功能已經成為了不少應用程式所必需的一部分。 Vue.js作為一個現代的JavaScript框架，提供了方便的資料綁定和元件化開發方式，而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-dropzone指令加入到el-card元件所在的容器上，並綁定一個與資料列表相關的屬性。

<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方法來阻止瀏覽器預設的拖曳行為。然後，在drop事件中，我們取得拖曳的資料項，並根據其id找到其在原始資料清單中的位置。然後，我們建立一個新的資料清單副本，從中移除拖曳的資料項，並在指定位置插入該資料項。最後，我們透過修改Vue實例中對應的資料屬性來更新資料列表。