1 给拖拽元素设置自定义属性=>对应的是数组的下标i
2 拖拽开始点击的元素,,获取自定义实属性
node.ondragstart =function(event){
//firefox设置了setData后元素才能拖动
event.dataTransfer.setData('te', event.target.innerText); //不能使用text，firefox会打开新tab
event.target.style.color ='#ffffff';
event.target.style.background ='rgba(10, 105, 255, 1)';
event.target.style.opacity ='0.5';
event.target.style.cursor ='move';
draging = event.target;
index1 =Number(draging.getAttribute('indexLayer'));
};
3 拖拽目标的元素,,
node.ondragover =function(event){
event.preventDefault();
let target = event.target;
//因为dragover会发生在ul上，所以要判断是不是li
if(target.className ==='layer' && target !== draging){
index2 =Number(target.getAttribute('indexLayer'));
}
};
4 得到两个坐标,,进行数组的从新排序
function swapArr(arr, index, tindex){
//如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，
//我们再把数组之前的那个拖动的元素删除掉，所以要len+1
if(index > tindex){
arr.splice(tindex, 0, arr[index]);
arr.splice(index +1, 1);
}else{
//如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，
//这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index
arr.splice(tindex +1, 0, arr[index]);
arr.splice(index, 1);
}
return arr;
}
