Vue2.x拖拽vue-draggable

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

实现拖拽需要一个第三方的js库，vue-draggable

npm或yarn安装

yarn add vuedraggable
npm i -S vuedraggable

-S：生产环境（线上依赖）

浏览器直接引用

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>\
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>\
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

安装完成之后使用

import draggable from 'vuedraggable'

属性详解：

chosenClass：选中样式，被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true

forceFallback：默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true

group： 相同的组之间可以相互拖拽

animation： 拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果

handle：指定可以拖拽的元素，设为class即可

需要注意的知识点：

我写的是两级的可拖拽组件，这就涉及到了事件穿透，所以在写事件的时候需要阻止事件穿透

@click="openfirstLevel($event, element)"

openfirstLevel(e, element) {
    e.stopPropagation()
},

vue-draggable事件

start: 开始拖动触发

add： 从一个group拖到另一个group时触发

remove： 移除触发

update：拖拽变换位置时触发

end：拖拽结束触发

choose：鼠标选中要拖拽元素时的事件（handle）

unchoose： 选中后在松开触发

sort：位置变化时触发

clone：从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素

事件使用：

@start="start"
start(e){
    console.log(e) // 这里边有拖动之前和之后的一些属性
}

拖动完之后你v-model的数组里边的数据结构也会发生相应的变化，不用自己处理数组，非常方便

js库自带bug

就是你把某个分组里的元素全部托出去，就拖布进来了，如果你也遇到了这种情况可以把最外层设一个最小高度

style="width: 106%; min-height: 0px"

这些看完基本上就可以进入写代码，由于篇幅问题，这不放代码了，需要源码的可以call我