先了解一下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;},