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 主要是多层级数据的拖拽，你可以找到它的 文件目录,其实原理也就是多个<draggable>的嵌套

image.png

参数说明：

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

<!-- 
          name        可跨越拖拽的共同类名
          pull：clone 禁止拖入这里
          put：false  禁止拖出这里
          sort：false 禁止拖动排序
          anmition    拖动时的延时动画效果
          filter      不能拖动的类名
          delay       延迟多少ms时拖动，防止用户误操作
         -->
        <draggable
          :list="list"
          class="drag_list"
          :group="{ name: 'drag', pull: 'clone', put: false }"
          :anmition="500"
          :delay="20"
          :sort="false"
          animation="500"
          filter=".not-drag"
        >
       <div
            v-for="item in list"
            :key="item.id"
            class="list-group-item"
            :class="{ 'not-drag': item.notDrag }"
          >
            <span class="appid">{{ item.id }}</span>
            <span class="yymc">{{ item.id }}</span>
            <span class="tb">{{ item.id }}</span>
            <span class="bm">{{ item.id }}</span>
          </div>
   </draggable>

image.png