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函数
- 方法