写一个蒙层,还未拖动前原始层在上面,
拖动那过程中(dragover)原始层在下面,
拖进目标元素后(drop),此时蒙层在上面,根据drop的$event获取落在蒙层哪个div上,然后放进原始层相应的那个div,最后把原始层放上面
//拖动过程中不断触发
document.addEventListener("dragover", function (event) {
document.getElementById('drop1').style.zIndex = '99';
event.preventDefault();//取消浏览器的默认行为。
});
//落在哪一个单元格里
document.addEventListener("drop", function (event) {
event.preventDefault();
for (var j = 0; j < 10; j++) {
event.preventDefault();
if (event.target.getAttribute("id") == "droptop-" + j) {//落到假的九宫格上(蒙层)
console.log('单元格相等了')
//克隆
var itm = document.getElementById(this.drog);
var cln = itm.cloneNode(true);
document.getElementById("droppable-" + j).appendChild(cln);//加到真的九宫格里
console.log(' document.getElementById("droppable-" + j)',
document.getElementById("droppable-" + j))
itm.remove(cln);
document.getElementById('drop1').style.zIndex = '-1';//假的九宫格放到下面
}
}
}