vue3 + Draggable 实现拖拽排序的最简单办法

一、安装并且在要使用的页面中引入

npm i vuedraggable@4.1.0 --save

import draggable from 'vuedraggable';

 二 、在vue3中使用

1.html部分

 重点看拖拽部分

group='label' //label相同之间的数组可以互相拖拽。

:disabled='false' //是否禁止拖拽 默认值是false。

:list='list' 相当于v-model绑定我们自己定义或者接口返回的数组。

:forceFallback='true' // 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等。

@end //结束时候的事件。

注意：这里要用:list=" "的方式绑定数组 这样子在拖拽结束后新的数组已经排好序了

1.JS部分

 拖拽结束后 点击完成按钮 输出查看我们定义的list数组 会发现 我们已经拿到拖拽完以后的排序好的数组 在提交的时候调用接口把他存住就可以啦。

3.CSS部分

 这里用的很基础的CSS样式 flex布局

好啦 接下来我们来看效果