vue表单组件拖拽

vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，

特点 : 封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。

第一步: 安装

第二步: 引入

第三步: 使用

童鞋们发现一个特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"

这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表， group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

还有提供两个方法:

非常简单，只要在元素里加入draggable属性，该元素就能被拖动了

ondragstart: 开始拖拽事件

ondragend: 结束拖拽事件

ondragenter: 拖动进入目标元素事件

ondragleave: 拖动离开目标元素事件

ondragover: 目标元素中拖拽事件

ondrop: 在目标元素中放下的事件

在table的每个tr标签里插入属性draggable=”true",那么行就能被拖动了

并给每行添加ondragstart事件

这里的目标元素就是tbody