javascript 使用 JS 拖放时防止在子元素内放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28203585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent drop inside a child element when drag & dropping with JS
提问by Pete Nicholls
I've created a simple drag and drop setup, 2 divs that allow a user to drag a child div between the two. It works fine unless a 'child div' is dropped directly inside another. I've been trying to wrap my head around it for hours and there must be a simple solution i am missing.
我创建了一个简单的拖放设置，2 个 div，允许用户在两者之间拖动一个子 div。除非将“子 div”直接放入另一个内部，否则它可以正常工作。几个小时以来，我一直在努力解决这个问题，而且我缺少一个简单的解决方案。
You can see a (not quite) working demo here https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id=livepreview4&_c9_host=https%3A%2F%2Fide.c9.io
你可以在这里看到一个（不完全）工作演示 https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id=livepreview4&_c9_host=https%3A%2F%2Fide.c9.io
any help is greatly appreciated
任何帮助是极大的赞赏
Thanks!
谢谢！
The html is very simple. ( note that i have tried returning false on onDrop and onDragOver events)
html非常简单。（请注意，我已尝试在 onDrop 和 onDragOver 事件上返回 false）
<div id = "squad" ondrop="drop(event)" ondragover="allowDrop(event)">
<h1>SQUAD</h1>
<div id = "jeff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
<h1>Jeff</h1>
<div class = "attributes">
<div class = "number kills"><span> 4</span><p>Kills</p></div>
<div class = "number deaths"><span>2 </span><p>Deaths</p></div>
<div class = "number GPM"><span> 12</span><p>GPM</p></div>
</div>
</div>
<div id = "Geoff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
<h1>Geoff</h1>
<div class = "attributes">
<div class = "number kills"><span> 7</span><p>Kills</p></div>
<div class = "number deaths"><span>0 </span><p>Deaths</p></div>
<div class = "number GPM"><span> 14</span><p>GPM</p></div>
</div>
</div>
<div id = "jeph" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
<h1>Jeph</h1>
<div class = "attributes">
<div class = "number kills"><span> 1</span><p>Kills</p></div>
<div class = "number deaths"><span>9 </span><p>Deaths</p></div>
<div class = "number GPM"><span> 24</span><p>GPM</p></div>
</div>
</div>
</div> <!-- end of squad div-->
<div id = "myTeam" ondrop="drop(event)" ondragover="allowDrop(event)">
<h1>My Team</h1>
</div>
<div id = "scores">
<h1>My Team Scores</h1>
</div>
and the js looks like this;
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>
回答by imtheman
The problem is that the drop is tied to the event, but the way you have it it should just be tied to the element like this:
问题是 drop 与事件相关联，但您拥有它的方式应该像这样与元素相关联：
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
el.appendChild(document.getElementById(data));
}
Then change your drop(event)to drop(event, this)in your two ondropevents. Take a look at the snippet in Full Page mode to see that it works.
然后更改您drop(event)要drop(event, this)在你的两个ondrop事件。在整页模式下查看代码段，看看它是否有效。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
el.appendChild(document.getElementById(data));
}* {
margin: 0;
box-sizing: border-box;
}
#squad {
width: 40vw;
height: 90vh;
overflow-y: scroll;
border-radius: 10px;
margin-left: 5vw;
margin-top: 5vh;
background-color: red;
float: left;
}
h1 {
text-align: center;
}
#myTeam {
float: left;
height: 60vh;
width: 40vw;
border-radius: 10px;
background-color: red;
margin-left: 10vw;
margin-top: 5vh;
}
#scores {
width: 40vw;
height: 25vh;
margin-top: 5vh;
margin-left: 10vw;
background-color: red;
border-radius: 10px;
float: left;
}
.champion {
width: 90%;
height: 15vh;
margin: 1%;
padding: 2%;
border: 1px black solid;
background-color: white;
border-radius: 10px;
overflow: hidden;
}
.champion h1 {
float: left;
}
.attributes {
margin-left: 10%;
float: left;
}
.number {
float: left;
text-align: center;
margin-left: 10px;
}
#div1,
#div2 {
width: 90%;
height: 15vh;
margin: 1%;
border: 1px black solid;
border-radius: 10px;
}<div id="squad" ondrop="drop(event, this)" ondragover="allowDrop(event)">
<h1>SQUAD</h1>
<div id="jeff" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
<h1>Jeff</h1>
<div class="attributes">
<div class="number kills"><span> 4</span>
<p>Kills</p>
</div>
<div class="number deaths"><span>2 </span>
<p>Deaths</p>
</div>
<div class="number GPM"><span> 12</span>
<p>GPM</p>
</div>
</div>
</div>
<div id="Geoff" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
<h1>Geoff</h1>
<div class="attributes">
<div class="number kills"><span> 7</span>
<p>Kills</p>
</div>
<div class="number deaths"><span>0 </span>
<p>Deaths</p>
</div>
<div class="number GPM"><span> 14</span>
<p>GPM</p>
</div>
</div>
</div>
<div id="jeph" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
<h1>Jeph</h1>
<div class="attributes">
<div class="number kills"><span> 1</span>
<p>Kills</p>
</div>
<div class="number deaths"><span>9 </span>
<p>Deaths</p>
</div>
<div class="number GPM"><span> 24</span>
<p>GPM</p>
</div>
</div>
</div>
</div>
<!-- end of squad div-->
<div id="myTeam" ondrop="drop(event, this)" ondragover="allowDrop(event)">
<h1>My Team</h1>
</div>
<div id="scores">
<h1>My Team Scores</h1>
</div>