Question

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

Answer 1

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

当你拖动其中一个可拖动元素时，它会触发事件处理程序，该事件处理程序在该事件上返回false，然后冒泡到它的＆＃39;容器，它运行自己的事件处理程序。但是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>

您可以在此处的codepen中看到此功能：https://codepen.io/kball/pen/PJPWmZ?editors=1010

一旦掉落，避免可拖动物体成为“可投放区域”

1 个答案: