Javascript 防止在拖动时掉落到子元素中（&；与JS一起下降

我创建了一个简单的拖放设置，2个div，允许用户在这两个div之间拖动一个子div。除非将一个“子div”直接放入另一个中，否则它可以正常工作。几个小时以来，我一直在试图解决这个问题，但我肯定错过了一个简单的解决方案

您可以在这里看到一个（不完全）工作的演示

非常感谢您的帮助

谢谢

html非常简单。（请注意，我已尝试在onDrop和onDragOver事件中返回false）

警察队伍
杰夫
4

2例死亡

12GPM

杰夫
7

00例死亡

14GPM

杰夫
1

9例死亡

24GPM

我的团队
我的球队得分了

js看起来像这样

<script>


function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

}
</script>

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

问题在于drop与事件相关，但您拥有它的方式应该与元素相关，如下所示：

function drop(ev, el) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  el.appendChild(document.getElementById(data));
}

然后在两个

ondrop

事件中，将

drop（event）

更改为

drop（event，this）

。以整页模式查看代码段，看看它是否有效

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（电动汽车，电动汽车）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
el.appendChild（document.getElementById（数据））；
}

*{
保证金：0；
框大小：边框框；
}
#小队{
宽度：40vw；
高度：90vh；
溢出y：滚动；
边界半径：10px；
左边距：5vw；
边缘顶部：5vh；
背景色：红色；
浮动：左；
}
h1{
文本对齐：居中；
}
#我的团队{
浮动：左；
高度：60vh；
宽度：40vw；
边界半径：10px；
背景色：红色；
左边距：10vw；
边缘顶部：5vh；
}
#得分{
宽度：40vw；
高度：25vh；
边缘顶部：5vh；
左边距：10vw；
背景色：红色；
边界半径：10px；
浮动：左；
}
.冠军{
宽度：90%；
高度：15vh；
利润率：1%；
填充：2%；
边框：1px黑色实心；
背景色：白色；
边界半径：10px；
溢出：隐藏；
}
.冠军h1{
浮动：左；
}
.属性{
左边距：10%；
浮动：左；
}
.号码{
浮动：左；
文本对齐：居中；
左边距：10px；
}
#第一组，
#第二组{
宽度：90%；
高度：15vh；
利润率：1%；
边框：1px黑色实心；
边界半径：10px；
}

警察队伍
杰夫
4.
杀死

2.
死亡

12
GPM

杰夫
7.
杀死

0
死亡

14
GPM

杰夫
1.
杀死

9
死亡

24
GPM

我的团队
我的球队得分了

当您将注意力放在孩子身上时，您的事件目标会发生变化。你需要在dom树上向上爬，直到你用下降处理器到达div。太棒了！这正是我需要的。我对react也有同样的问题，但我不确定如何用组件实现这一点。我是否应该将下拉事件向下传递给任何子组件？看起来有点忙。这帮了我很多。元素是真正的解决方案！！

function drop(ev, el) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  el.appendChild(document.getElementById(data));
}