本文主要详细介绍了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拖放
分区拖动交换位置
如果简单的功能都满足不了,推荐这款写轮。
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。