vue拖拽排序插件vuedraggable

首先在vue项目中，用npm包下载下来

npm install vuedraggable -S

下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

注册组件

components: { draggable },

在template标签里面使用

<draggable v-model="myArray" @update="datadragEnd" class="drag" :options="{animation:500}">

<transition-group>

<div v-for="element in myArray" :key="element.id">{{element.name}}</div>

</transition-group>

</draggable>

js代码：

data() {return {

myArray: [

{ name: '一', id: 1 },

{ name: '二', id: 2 },

{ name: '三', id: 3 },

{ name: '四', id: 4 },

{ name: '五', id: 5 },

{ name: '六', id: 6 },

{ name: '七', id: 7 },

{ name: '八', id: 8 },

{ name: '九', id: 9 },

{ name: '十', id: 10 }

]

}

}

mounted() {

getdata (evt) {

console.log(evt.draggedContext.element.text)

},

datadragEnd (evt) {

evt.preventDefault();

console.log('拖动前的索引 :' + evt.oldIndex)

console.log('拖动后的索引 :' + evt.newIndex)

console.log(this.myArray);

}

},

mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
}

css代码：

.drag {

width: 300px;

background: #42b983;

}

.drag span {

display: flex;

flex-wrap: wrap;

}

.drag div {

font-size: 20px;

padding: 20px;

margin: 2px;

border: 2px dashed red;

}

完成

参考：

https://github.com/SortableJS/Vue.Draggable

https://github.com/SortableJS/Sortable