防止在使用JS拖放时将其放入子元素内

prevent drop inside a child element when drag & dropping with JS

本文关键字：元素 拖放 JS      更新时间：2023-09-26

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

您可以在此处查看（不完全）工作演示https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id=livepreview4&_c9_host=https%3A%2F%2Fide.c9.io

任何帮助都非常感谢

谢谢！

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>

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>

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

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

然后将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>

相关文章：