我正在尝试将元素从一个“可放置”div 拖动到另一个。我从 2 个蓝色的“可拖动”矩形开始。当我将其中一个拖到“红色可放置”矩形之一上时，这些红色矩形会变成绿色(当元素被拖过时)。我使用 ondragover 和 ondragleave 来完成这项工作。
当我将一个蓝色可拖动矩形(我们称之为 A)放在另一个可拖动蓝色矩形(之前已放入其中一个红色矩形(我们称之为 B))上时，出现了问题。当 A 悬停在 B 上时，B 也会变成绿色。换句话说，它也成为一个可放置区域。我想避免...
我不明白的是我为这些蓝色矩形设置了:
ondrop="return false;" ondragover="return false;
所以我认为这会阻止它们变得可丢弃。虽然看起来一旦它们被附加到可放置的 div (红色的)，那么它们就会继承它们被“放置”进去的红色矩形的属性。我怎样才能防止这种情况发生会发生吗？
function drag(ev)
{
//ev.dataTransfer.dropEffect = "move";
ev.dataTransfer.setData("text/plain", ev.target.id);
//console.log(ev.target.id); // id
}
function dragover_handler(ev)
{
ev.dataTransfer.dropEffect = "move";
ev.preventDefault();
var item = document.getElementById(ev.target.id);
item.style.border = '2px solid green';
//console.log(ev.target.id + " is being dragged over"); // id
}
function dragover_handler1(ev)
{
ev.preventDefault();
}
function dragleave_handler(ev)
{
var item = document.getElementById(ev.target.id);
item.style.border = '1px solid red';
}
function drop_handler(ev, el)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log("here >>" + data + "<<");
el.appendChild(document.getElementById(data));
//var item = document.getElementById(ev.target.id);
el.style.border = '1px solid red';
}html
{
width: 100%;
height: 100%;
}
.to
{
border: 1px solid red;
width: 100%;
margin: 0px;
box-sizing: border-box;
display: block;
}
.from
{
display: block;
border: 5px solid blue;
height: 50px;
width: 100%;
box-sizing: border-box;
}<body>
<p>Top List</p>
<div id="div1" class="to" ondrop="drop_handler(event, this)" ondragleave='dragleave_handler(event)' ondragover="dragover_handler(event)"> DROPPABLE AREA 1</div>
<div id="drag1" class="from" draggable="true" ondragstart="drag(event)" ondrop="return false;" ondragover="return false;">draggable element 1</div>
<div id="drag2" class="from" draggable="true" ondragstart="drag(event)" ondrop="return false;" ondragover="return false;">draggable element 2</div>
<p>Bottom List</p>
<div id="div2" class="to" ondrop="drop_handler(event, this)" ondragleave='dragleave_handler(event)' ondragover="dragover_handler(event)">DROPPABLE AREA 2</div>
</body>
</html>最佳答案
这里的关键问题是 return false; 不会停止 native 事件的事件冒泡或传播。 (它适用于 jQuery 事件，这导致该概念在互联网上广泛传播，这可能就是您期望它以这种方式运行的原因)。
然后发生的事情是，当您拖动一个可拖动元素时，它会触发事件处理程序，该事件处理程序在该事件上返回 false，然后冒泡到其容器，该容器运行其自己的事件处理程序。然而，event.target 仍然设置为原始事件!
您应该能够通过在可拖动事件处理程序中的 return false; 前面添加 event.preventDefault(); 来获得所需的效果，如下所示:
<div id="drag1" class="from" draggable="true" ondragstart="drag(event)" ondrop="event.stopPropagation(); return false;" ondragover="event.stopPropagation(); return false;">draggable element 1</div>
<div id="drag2" class="from" draggable="true" ondragstart="drag(event)" ondrop="event.stopPropagation(); return false;" ondragover="event.stopPropagation(); return false;">draggable element 2</div>
您可以在此处的代码笔中看到此功能:https://codepen.io/kball/pen/PJPWmZ?editors=1010
关于javascript - 避免可拖动对象一旦掉落就变成 "droppable areas"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46258834/