Vue3使用vue-draggable实现拖拽配置工作台快捷方式
给我一杯酒，再给我一支烟 2024-08-30 08:33:01 阅读 71
实现效果
拖拽式的快捷方式配置一般用于后台管理系统中的首页或者工作台页面，具体效果如下：
快捷方式轮播
拖拽配置快捷方式
实现方案
使用html5原生的拖拽属性
这种方法我已经试过了，虽然也能实现，但是效果肯定没有大佬们做好的拖拽组件更好，逻辑也比较复杂，所以这里不多赘述，放个简单的代码在下面，有需要的同学可以参考一下。
<code><div class="app-list" @drop="drop" @dragover="allowDrop">code>
<div class="app-item" v-for="(item, index) in alreadyApp" :key="index">code>
<div class="item-div already-item-div" draggable="true">code>
<i class="el-icon-remove already-remove" @click="del(index)"></i>code>
<svg-icon :icon-class="item.icon" style="font-size: 46px;" />code>
<span class="icon-name">{ { item.quickEntryName }}</span>code>
</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 -S
import draggable from "vuedraggable";
Vue3.x项目
vue3项目需要使用vue-draggable-next，不然会报错哈。
pnpm i vue-draggable-next
//当然，也可以使用任意你爱的工具安装
import draggable from "vuedraggable";
下面看看实现代码：
<draggable v-model="dialogSelectedApp" code>
group="app"code>
item-key="quickEntryName"code>
class="app-list"code>
animation="500">code>
<template #item="{ element }">code>
<div class="app-item dialog-item">code>
<div class="item-div already-item-div">code>
<SvgIcon :name="element.icon" :iconStyle="{ width: '50px', height: '50px' }" />code>
<span class="icon-name">{ { element.quickEntryName }}</span>code>
</div>
</div>
</template>
</draggable>
结合文档来看一下上面的代码。
是不是有点看不明白？看不明白就对了。
首先看看<code>group,如果你要实现从一个区域拖拽到另一个区域，将这个值设置为相同的字符，或者按照文档中的描述，设置为一个对象，保证name相同就ok了。
sort属性设置为false时，在当前区域不能拖拽排序。
animation属性，就是设置动画的持续时间，注意单位时ms。
另外使用插槽时，#item="{ element }"code>，这里的element不要修改，可能会出现报错。
非官方中文文档链接：vue-draggable中文文档
类似工作台拖拽的例子可以参考：工作台拖拽
写了一个Vue3的demo，具体样式可以自行修改：Vue3使用vue-draggable-next
感谢阅读，有兴趣交流技术的可以关注一下我！
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。