1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中 使用h5 drag实现拖拽功能

vue中 使用h5 drag实现拖拽功能

时间:2021-09-18 21:06:07

相关推荐

vue中 使用h5 drag实现拖拽功能

先了解一下h5中的drag事件:

先贴一段代码:

先设置draggable属性为true

//开始拖拽时执行 通过e.dataTransfer.setData 设置数据handleDragStart (e, item) {e.dataTransfer.setData('draggingData', item);this.dragging = item; // 第二种写法,不使用setData那种写法,自己在data中定义一个变量},

// 拖拽完成事件(停止拖拽删除)handleDragEnd (e) {e.dataTransfer.clearData(); // 第一种方法this.dragging = null; // 第二种方法},

(ondragenter)当元素被拖动至有效的拖放目标时运行脚本,但是我们也直接可以使用ondrop事件

dropEvent (e, item, selectedRules) {const moveData = e.dataTransfer.getData('draggingData');const newRulesArr = [...this[selectedRules]];// // 找出当前移动索引目标索引const moveIndex = newRulesArr.indexOf(moveData);// // 找出当前移动之后索引const finishIndex = newRulesArr.indexOf(item);// // 赋值操作 // 删除源数据,返回被删除的数据数组 // 删除源数据,返回被删除的数据数组newRulesArr.splice(finishIndex, 0, ...newRulesArr.splice(moveIndex, 1));this[selectedRules] = newRulesArr;},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。