Vue3使用vue-draggable实现拖拽配置工作台快捷方式

实现效果

拖拽式的快捷方式配置一般用于后台管理系统中的首页或者工作台页面，具体效果如下：

快捷方式轮播

拖拽配置快捷方式

实现方案

使用html5原生的拖拽属性

这种方法我已经试过了，虽然也能实现，但是效果肯定没有大佬们做好的拖拽组件更好，逻辑也比较复杂，所以这里不多赘述，放个简单的代码在下面，有需要的同学可以参考一下。

<divclass="app-list"@drop="drop"@dragover="allowDrop"><divclass="app-item"v-for="(item, index) in alreadyApp":key="index"><divclass="item-div already-item-div"draggable="true"><iclass="el-icon-remove already-remove"@click="del(index)"></i><svg-icon:icon-class="item.icon"style="font-size: 46px;"/><spanclass="icon-name">{{ item.quickEntryName }}</span></div></div></div><!--......页面其他样式 -->

drag(ev){
      ev.dataTransfer.setData("te", ev.target.id);},allowDrop(ev){
      ev.preventDefault();},drop(ev){
    ev.preventDefault();var data = ev.dataTransfer.getData("te");const dragText = document.getElementById(data).getElementsByClassName("icon-name")[0].innerText 
    //......逻辑处理}

大致的实现方法就是使用html5中的拖拽属性，把

 draggable

属性设置为

true

，具体的操作方法可以参考一下api文档。

这里需要注意一点，因为每个

div

块都要进行拖动，所以我绑定了一个

动态id

，在

drop(ev)

方法中对数组进行处理，通过

document.getElementById(data).getElementsByClassName

选定元素，再进行新增/删除/排序等操作。

使用vue-draggable

毫无疑问，使用大佬们封装好的组件肯定比较简单，而且效果很

nice

！
下面讲一下在vue中使用

vue-draggable

的步骤。

Vue2.x项目

npm i vue-draggable -S//yarn add vue-draggable 或者 cnpm i vue-draggable -Simport draggable from"vuedraggable";

Vue3.x项目

vue3项目需要使用

vue-draggable-next

，不然会报错哈。

pnpm i vue-draggable-next
//当然，也可以使用任意你爱的工具安装import draggable from"vuedraggable";

下面看看实现代码：

<draggablev-model="dialogSelectedApp"group="app"item-key="quickEntryName"class="app-list"animation="500"><template#item="{ element }"><divclass="app-item dialog-item"><divclass="item-div already-item-div"><SvgIcon:name="element.icon":iconStyle="{ width: '50px', height: '50px' }"/><spanclass="icon-name">{{ element.quickEntryName }}</span></div></div></template></draggable>

结合文档来看一下上面的代码。

是不是有点看不明白？看不明白就对了。

首先看看

group

,如果你要实现从一个区域拖拽到另一个区域，将这个值设置为相同的字符，或者按照文档中的描述，设置为一个对象，保证

name

相同就ok了。

sort

属性设置为

false

时，在当前区域不能拖拽排序。

animation

属性，就是设置动画的持续时间，注意单位时

ms

。

另外使用插槽时，

#item="{ element }"

，这里的

element

不要修改，可能会出现报错。

非官方中文文档链接：vue-draggable中文文档

类似工作台拖拽的例子可以参考：工作台拖拽

写了一个Vue3的demo，具体样式可以自行修改：Vue3使用vue-draggable-next

**

感谢阅读，有兴趣交流技术的可以关注一下我！

**