避免可拖动对象一旦被拖放就成为“可拖放区域”答案

【问题标题】：Avoid draggable objects to become "droppable areas" once dropped避免可拖动对象一旦被拖放就成为“可拖放区域”
【发布时间】：2017-09-16 22:04:51
【问题描述】：

我正在尝试将项目从一个“可放置”的 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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这里的关键问题是return false; 不会停止事件冒泡或原生事件的传播。（它适用于 jQuery 事件，这导致该概念在互联网上广泛传播，这可能就是您期望它以这种方式运行的原因）。

然后发生的事情是，当您拖动其中一个可拖动元素时，它会触发事件处理程序，该事件处理程序在该事件上返回 false，然后冒泡到其容器，该容器运行自己的事件处理程序。但是event.target 仍设置为原始事件！

您应该能够通过在可拖动事件处理程序中将 event.preventDefault(); 添加到 return false; 前面来获得所需的效果，如下所示：

<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

【讨论】：

感谢您提供完整且有据可查的答案。我很感激你只是没有给出答案，而是提供了必要的背景来学习有用的东西和整体机制的逻辑））做得好。