VUE 元素拖拽、移动
程序员文章站
2022-03-07 09:13:12
元素拖拽 作者:一粒尘土 时间:2019 10 30 使用范围:两个元素位置交换,移动元素到指定位置 涉及函数 |属性|解释 |: |: | |draggable|是否允许元素进行拖拽| |dragstart|拖拽开始触发的函数,可在此获取元素| |dragover|在目标元素内进行拖动时触发的函数 ......
元素拖拽
作者:一粒尘土 文章地址:https://www.cnblogs.com/qdclub/p/11763015.html 使用范围:两个元素位置交换,移动元素到指定位置
涉及函数
属性 | 解释 |
---|---|
draggable | 是否允许元素进行拖拽 |
dragstart | 拖拽开始触发的函数,可在此获取元素 |
dragover | 在目标元素内进行拖动时触发的函数 |
dragenter | 当拖拽进入目标元素时出发的函数 |
dragend | 拖拽结束 |
快速熟悉上边表格的知识点,然后结合如下的小demo进行加深记忆
html
<div :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)"> </div>
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;禁止拖拽。
下一篇:
标签是什么?怎么用!