Javascript 避免可拖动的对象变为；“可降落区域”；一旦下降

我正在尝试将项目从一个“可拖放”分区拖到另一个分区。我从两个蓝色的“可拖动”矩形开始。当我将其中一个拖动到其中一个“红色可拖放”矩形上时，这些红色矩形将变为绿色（在拖动项目时）。我使用

ondragover

和

ondraglave

来实现这一点

当我将一个蓝色的可拖动矩形（我们称之为A）放置在另一个可拖动的蓝色矩形上时，出现了一个问题，该矩形之前已放置在一个红色矩形（我们称之为B）中。当A悬停在B上时，B也变成绿色。换句话说，它也变成了一个可下降的区域。这是我想要避免的

我不明白的是，我设置了这些蓝色矩形：

ondrop="return false;" ondragover="return false;

所以我想这可以防止它们掉下来。尽管看起来好像它们一被附加到可拖放的

div

（红色的）上，就继承了它们被“拖放”到的红色矩形的属性。我怎样才能防止这种情况发生

功能拖动（ev）
{
//ev.dataTransfer.dropEffect=“移动”；
ev.dataTransfer.setData（“文本/普通”，ev.target.id）；
//console.log（ev.target.id）；//id
}
功能dragover_处理器（ev）
{
ev.dataTransfer.dropEffect=“移动”；
ev.preventDefault（）；
var item=document.getElementById（ev.target.id）；
item.style.border='2px纯绿色'；
//console.log（ev.target.id+“正在被拖拽”）；//id
}
功能dragover_手柄1（ev）
{
ev.preventDefault（）；
}
函数dragleave_处理器（ev）
{
var item=document.getElementById（ev.target.id）；
item.style.border='1px纯红'；
}
功能下降处理器（ev、el）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
console.log（“here>>”+data+“这里的关键问题是
返回false；
不会停止事件冒泡或本机事件的传播（它会停止jQuery事件的冒泡或传播，这导致该概念在internet上广泛传播，这可能就是您希望它以这种方式运行的原因）

然后，当您拖动其中一个可拖动的元素时，它会触发事件处理程序，该事件返回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>

draggable元素1
可拖动元件2

您可以在这里的代码笔中看到这一功能：
这里的关键问题是
返回false；
不会停止本机事件的冒泡或传播（它会停止jQuery事件的冒泡或传播，这导致该概念在internet上广泛传播，这可能就是您希望它以这种方式运行的原因）

然后，当您拖动其中一个可拖动的元素时，它会触发事件处理程序，该事件返回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>

draggable元素1
可拖动元件2

您可以在这里的代码笔中看到这一功能：
感谢您提供了完整且有充分文档记录的答案。我很感激您没有给出答案，但提供了必要的背景知识来学习一些有用的东西和整个机制的逻辑）)做得好。感谢您提供了完整且有文档记录的答案。我很感谢您没有给出答案，但提供了必要的背景知识来学习一些有用的东西，以及整个机制的逻辑。做得好。