原生drag拖拽后元素过大,挡住其他可拖动位置无法拖动问题

写一个蒙层,还未拖动前原始层在上面,

拖动那过程中(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';//假的九宫格放到下面
          }
        }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值