当它已经有子元素时防止丢弃事件？ 拖放

我正在做简单的匹配游戏。 游戏有很多问题。 我正在使用拖放进行匹配。 首先，我将图像元素放到一个容器中，当我选择另一个元素并尝试将其放入同一个容器时，目前它正在覆盖现有元素。 我想检查已经有元素的容器。 如果没有，请允许掉落，否则防止跌落。

码：

           .left, .right { float: left; width: 100px; height: 35px; margin: 10px; border: 1px solid black; }    
Matching the following
 
 
 
 Option A 
 
 
  
 
 
 
 
 
 
 
 
 Option B Matching 
 
 
 
 Option B 
 
 
  
 
 
 
 
 
 
 
 
 Option A Matching 
 
 
  function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var rightId = event.target.id; console.log("before"+($("#"+rightId).children().length)); if($("#"+rightId).children().length == 0){ console.log($("#"+rightId).children().length); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); } console.log("after"+($("#"+rightId).children().length)); }  

屏幕截图

当容器已经有子元素时，我想阻止drop事件。 同时，当任何一个容器为交换空时，我需要重新排列掉落的元素。

实际上我想将图像从左容器拖到右容器。 在将元素放到右侧容器之前，我想检查容器是否已经有另一个之前丢失的图像。 如果容器中没有图像，则允许删除图像，否则会阻止丢弃图像。

等待建议。 提前致谢！

Answer 1

我认为你可以检查元素之间的冲突并决定你的行动

按照示例链接查看是否存在使用vanilla javascript和jquery的冲突：

Vanilla JS Div碰撞检测

如何在我的情况下检测div碰撞？

https://jsfiddle.net/jeanwfsantos/bp57zgrL/

我希望这可以帮助你。

Answer 2

我认为你真正的问题是你已经将allowDrop(event)为event.preventDefault()所以总是允许allowDrop(event) 。

相反，你想要做的是在目标已被占用的情况下禁止掉落。 尝试使用allowDrop()的以下实现：

 function allowDrop(event) { var t = event.target; // Find the drop target while (t !== null && !t.classList.contains("target")) { t = t.parentNode; } // If the target is empty allow the drop. if (t && t.childNodes.length == 0) { event.preventDefault(); } return false; } 

这是一个表明它在行动的小提琴 。 （我自由地承认我是根据之前的答案借来的。:)

 let offset = [0, 0] function allowDrop(ev) { var t = ev.target; while (t !== null && !t.classList.contains("target")) { t = t.parentNode; } if (t && t.childNodes.length > 0) { return false; } ev.preventDefault() } function drag(ev) { ev.dataTransfer.setData('dragID', ev.target.id) offset = [ ev.target.offsetLeft - ev.clientX, ev.target.offsetTop - ev.clientY ] } function drop(ev) { ev.preventDefault() const data = ev.dataTransfer.getData('dragID') ev.target.appendChild(document.getElementById(data)) } 

 .target { width: 100px; height: 100px; border: 1px solid #aaaaaa; padding: 10px; } .element { width: 100px; height: 100px; }