元素拖拽
作者:一粒尘土 文章地址:https://www.cnblogs.com/qdclub/p/11763015.html
使用范围:两个元素位置交换,移动元素到指定位置
涉及函数
属性
解释
draggable
是否允许元素进行拖拽
dragstart
拖拽开始触发的函数,可在此获取元素
dragover
在目标元素内进行拖动时触发的函数
dragenter
当拖拽进入目标元素时出发的函数
dragend
拖拽结束
快速熟悉上边表格的知识点,然后结合如下的小demo进行加深记忆
html
:key="imgidx"
v-for="(img, imgidx) in result"
:style="'background-image: url('+img.gallery_image_url+');'"
class="dib wi-17x ht-11x bdr-3 centerimage mr-14 mb-14 pr of-h hover-item graylight-bg"
:draggable="allowhandle"
@dragenter="dragenter($event, img)"
@dragend="dragend($event, img)">
js
data () {
return {
drawtargetele: {}
}
},
methods: {
/**
* 推拽开始,解决火狐无法拖拽情况
*/
dragstart (e, item) {
if (this.allowhandle) {
e.datatransfer.setdata('aaa', null)
}
},
/**
* 拖拽元素至目标元素内时触发
* @item 目标元素
* @info 可在此处获取,拖拽元素的一系列属性
*/
dragenter (e, item) {
if (this.allowhandle) {
// 获取推拽的目标元素
this.drawtargetele = item
}
},
/**
* 拖拽完成之后触发
* @item 目标元素
* @info 可在此处获取,拖拽元素的目标元素一系列属性
*/
dragend (e, item) {
console.log(item)
/**
* 进行拖拽完成的操作
*/
},
}
注解
另外如需有需监听元素的拖拽情况,可调用对应的函数即可。
如果不允许拖动到该元素区域内,可在dragover、dragenter中设置dropeffect:none;禁止拖拽。