原生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';//假的九宫格放到下面}}
}

原生drag拖拽后元素过大，挡住其他可拖动位置无法拖动问题相关推荐

【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
【Fungus笔记】No.3：与 Sprite(精灵) 交互，Click(点击) or Drag(拖拽)
当Block(段落)的响应事件为Sprite类时,可以通过跟Sprite(精灵)的交互来执行指令. 交互行为包括拖拽和点击两种. 首先是 Object Clicked(点击). 设置为点击事件后,它要 ...
H5 drag拖拽移动小结及示例
drag api是h5中的新功能,用来拖拽页面元素挺有用的,先小结一下首先,基本概念声明,概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间当我们需要使用 UGUI 中的 ...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
原生JS拖拽模型（有限制范围的）
原生拖拽模型(有限制范围的) 思路: 确定盒子的移动的方式 1. 定位的left top值可以让盒子移动 2.直接margin 顶(在文档流中,不建议) 父元素的padding顶 (更加不建议 ...

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

原生drag拖拽后元素过大，挡住其他可拖动位置无法拖动问题相关推荐

最新文章

热门文章