draggable布局 vue_vue2 拖动排序 vuedraggable组件的实现

一、安装插件

npm install -D vuedraggable

二、在需要排序的界面中引入组件

import draggable from 'vuedraggable'

export default {

name: 'HelloWorld',

components: {

draggable

},

三、在模板中使用

item { {item}}

四、实现change、start、end、move方法，v-model绑定的数据就是排序后的数据，可以传递给后台修改数据库数据

methods: {

change (event) {

console.log('change', event)

},

start (event) {

console.log('start', event)

},

end (event) {

console.log('end', event, this.groups)

},

move (event, orgin) {

console.log('move', event, orgin)

}

}

五、完整代码，参考网址

排序

item { {item}}

import draggabl