vuedraggable<跨列表拖拽>

202112141408.gif

帮助：

vueDraggable在线演示地址
vueDraggable中文文档
gitHub地址

需求：

项目需要实现跨列表的拖拽，以及多级列表的拖拽，如上图所示。之前也有用过 sortablejs(element-ui表格+sortablejs拖动排序戳这里)，主要是针对element-ui表格拖拽排序进行的处理,而vuedraggable是针对sortablejs再次封装和使用（官方是这么说的~~），所以看你自身需要了。

image.png

使用：

//安装
npm i -S vuedraggable

image.png

vueDraggable在线演示地址上面有详细的代码，所以这边就不贴过多的代码了。

• Two Lists 主要用于两个列表之间的拖拽Ne
• Nested 主要是多层级数据的拖拽，你可以找到它的 文件目录,其实原理也就是多个的嵌套

image.png

参数说明：

这里是我完成自己项目时用到的一些参数，希望可以帮助你。想要直接使用的，可以忽略掉。谢谢大家看到这里，祝大家踩坑愉快~~
注意:如果你用到了 ghostClass或者chosenClass 定义拖拽样式时，尽可能的用全局样式，否则可能不生效哦~~

        
       

            {{ item.id }}
            {{ item.id }}
            {{ item.id }}
            {{ item.id }}
          
   

image.png