最近在優化一個vue的博客系統，想實現文章列表處的文章拖拽功能。就試了一下awe-dnd vue插件，覺得還挺好用的。
安裝
npm install awe-dnd --save
使用
在main.js中，通過Vue.use引入
import VueDND from 'awe-dnd' Vue.use(VueDND) 在vue文件中的使用
<template> <div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }" :key="color.text" >{{color.text}}</div> </div> </template> <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Hotpink" }, { text: "Gold" }, { text: "Crimson" }, { text: "Blueviolet" }, { text: "Lightblue" }, { text: "Cornflowerblue" }, { text: "Skyblue" }, { text: "Burlywood" }] } }, mounted () { this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) console.log(value.list) console.log(value.otherData) }) this.$dragging.$on('dragend', () => { }) } } </script> 組件參數
| 名稱 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| item | Object | - | 每一個可拖拽的對象 |
| list | Array | - | 可拖拽對象的數組 |
| group | String | - | 這是一個dragging list的unique key |
拖拽完成之后，需要把新的數組順序提交到后台，創建一個sort_order字段保存順序。
參考： 可拖動排序的vue組件 , github
作者：real_ting
鏈接：https://www.jianshu.com/p/7afcf8a7af75
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。