vue html 拖拽,VUE 元素拖拽、移动

元素拖拽

作者：一粒尘土 文章地址：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;禁止拖拽。