本文主要详细介绍了vue拖拽组件的使用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
前言
Pc端开发需要拖拽组件来完成列表的顺序交换。一般移动端的UI组件都会包含它们。但是，我正在使用的iview没有任何具有该功能的组件，所以我手工编写一个，实现起来非常简单。效果图如下：
可以拖拽完成新的排序，点击一个项目可以触发相关事件。
关于拖拽 drag drop
拖放(Drag and drop)是HTML5标准的一个组成部分。
拖拽对象
DataTransfer对象，该对象只能在拖放事件的事件处理程序中访问。重要属性：
有效允许(none | copy | copy link | copy move | link，link move | move | all | uninitialized):设置或返回被拖动元素的拖动行为。
DropEffect( none | copy | link | move):设置或返回拖放目标上允许的拖放行为。如果此设置设置的拖放行为不在effectAllowed属性设置的多个拖放行为中，拖放操作将失败。
DataTransfer.getData(format):获取DataTransfer对象中格式化的数据。其中format代表数据格式，data代表数据。
拖拽属性
draggable属性指定是否可以拖动元素。
拖拽事件
Ondragstart:在拖动开始时执行，返回被拖动的元素。
Ondragover:返回放置拖动数据的位置。
默认情况下，数据/元素不能放在其他元素中。如果需要设置允许的放置，我们必须防止元素的默认处理。
Ondragenter:当被拖动的元素进入放置目标时执行。
Ondragleave:当被拖动的元素离开放置目标时执行。
Ondragend ondrop:指鼠标释放被拖动对象，但被拖动对象挂起的元素和被拖动的元素被返回的事件。
源码：
模板
div class='过渡容器'
'项中的'项' v-for='(项，索引':键='索引'
draggable='true '
@ dragstart=' handleDragStart($ event，item)'
@ dragover . prevent=' handleDragOver($ event，item)'
@ dragent=' handledragent($ event，item)'
@dragend='handleDragEnd($event，item)'
@click='chooseNav(item)'
p class='trans-btn '
span v-if='item.problemId '
b class='id '
{{item.problemId}}
/b
{{item.key}}
/span
span v-else
{{item.key}}
/span
跨度
' I-button v-if=' BTN ' size=' small ' type=' error ' style=' margin-right:10px；'@click='deleteItem(item，index)'删除/i-button
/span
/p
/div
/div
/模板
脚本
“导入”。/index . less '；
导出默认值{
名称：“过渡”，
道具：{
数据源：数组，
btn:布尔型，
},
data() {
返回{
项目：[]，
拖动：空，
};
},
观察：{
数据源(val) {
this.items=val
},
拖动(val) {
if(this . data source . includes(val)){
this.dragging=val
}否则{
this.dragging=null
}
},
},
方法：{
handleDragStart(e，item) {
this.dragging=item
},
handleDragEnd() {
this.dragging=null
这个。$emit('hasChanged '，this . items)；
},
//先把div变成可以放置的元素，也就是覆盖dragenter/dragover。
手柄拖拽工具(e)
e . data transfer . drop effect=' move '；//e . data transfer . drop effect=' move '；//在拖放目标的dragenter中设置！
},
handleDragEnter，item) {
如果(这.拖){
e . data transfer . effect allowed=' move '；//为需要移动的元素设置dragstart事件
if(item===this . drawing){
返回；
}
const newItems=[.this . items]；
console . log(new items)；
const src=new items . index of(this . drawing)；
const dst=new items . index of(item)；
newItems.splice(dst，0，newItems.splice(src，1))；
this.items=newItems
}
},
选择导航(值){
这个。$emit('selectItem '，val)；
},
deleteItem(项目，索引){
这个。$emit('deleteItem '，Item，index)；
},
编辑器(项目，索引){
这个。$emit('editorItem '，Item，index)；
},
},
};
/脚本
基本功能齐全。
参考文章
学校W—— HTML5拖放
分区拖动交换位置
如果简单的功能都满足不了，推荐这款写轮。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。