vuedraggable插件使用总结

vuedraggable插件使用总结

【1】 需求：一个list内，div元素上下拖动某个地方交换位置，且拖动时div元素带有样式，预拖动位置出现虚线边框；
【2】经历：由于没写过前端，未遇过拖拽需求，被别人推荐使用draggable插件，摸索了一天才实现效果；
【3】资源：vuedraggable插件：https://sortablejs.github.io/Vue.Draggable/
官网例子：https://david-desmaisons.github.io/draggable-example/
【4】用到的draggable属性及方法：

• 属性：

list: 'listData' //绑定拖动数组，这样拖动时，数组内可自动变化，也可用v-model，二者选其一
animation:300 //单位ms,指拖动元素结束所用的动画时间
handle: '.dragHandle'//选择器名称,只能通过拖动此处拖动才生效
ghostClass:'ghostClass'//影子类,指拖动过程中产生的跟拖动元素一模一样的影子元素，这里我主要通过该属性来设置预占位，注意，此处的选择器不加‘.’哦
dragClass:'dragClass' //通过添加该类设置元素在拖动过程中的样式等，我这里必须要设置该类，否则区分不出拖动过程中元素的样式和影子类预占位，注意，此处的选择器不加‘.’哦
chosenClass:'chosenClass'//欲拖动时所选中的元素，通过添加该类，可设置选中元素时的样式等，注意，此处的选择器不加‘.’哦
forceFallback: true,  // 设置为true,可忽略原生html的拖动，比如一个标签使用html原生属性draggable为true,并设置dragstart和drop函数，这里的拖动不会走drop函数

• 方法