拖拽删除

背景

自营上传图片，但是需要排序和删除功能，所以用到了h5的拖拽

源元素： 即被拖拽的元素。

目标元素： 即合法的可释放元素。

每个事件的事件主体都是两者之一。

拖拽事件

触发顺序及次数

被拖拽元素，事件触发顺序是 dragstart->drag->dragend；对于目标元素，事件触发的顺序是 dragenter->dragover->drop/dropleave。

其中drag和dragover会分别在源元素和目标元素反复触发。整个流程一定是dragstart第一个触发，dragend最后一个触发。

这里还有一个注意的点，如果某个元素同时设置了dragover和drop的监听，那么必须阻止dragover的默认行为，否则drop将不会被触发。

• 站在源元素和目标元素的角度来看，就是dragstart 可以获取到当前的信息，源dragenter可以获取到目标元素，dragend，此时拖拽结束，可以做碰撞检测的逻辑

移动位置

api使用

这里我利用 dragstart 记录源数据，和索引。利用dragenter记录目标元素的数据，和索引，等拖拽结束，利用dragend做位置移动逻辑。

排序逻辑

• 利用splice, 先删除源数据，然后再目标元素之后，添加新元素。实现拖拽排序

比如将a 和b交换位置

1. 获取a和b的索引
2. 先将a删除
3. 在b之后，再添加a

let oldData = 'a';
let newData = 'b';
let arr = ['d', 'a', 'c', 'b', 'e'];
let indexA = arr.indexOf(oldData); // 0
let indexB = arr.indexOf(newData); // 1
arr.splice(indexA, 1);
arr.splice(indexB, 0, oldData);
console.log('arr', arr); //[ 'd', 'c', 'b', 'a', 'e' ]

代码逻辑