中断拖放范围

Question

请告诉我。如果将跨度专门拖动到另一个跨度而不是自由空间，则会发生某种合并（请参阅gif）。 如何解决这个错误？ 先感谢您。

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));
}

#div1,
#div2 {
  float: left;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  display: inline-block;
}
.drop {
width:100px;
height:50px;
display:block;
border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background:#fafafa;width:100%;height:440px;padding-top:10px;">
  <div style="text-align:center;width:49%;height: 100%;display:inline-block;border-right:1px solid #e0e0e0;">
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <span class="drop" draggable="true" ondragstart="drag(event)" id="drag1" data-orderID="1">SPAN 1</span>
    </div>
  </div>
  <div style="text-align:center;width:49%;height: 100%;display:inline-block;">
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
      <span class="drop" draggable="true" ondragstart="drag(event)" id="drag2"  data-orderID="2">SPAN 2</span>
    </div>
  </div>
</div>

Answer 1

如果您不想在范围内放置下降，则可以阻止从该节点下降。 <span class="drop" ondrop="event.stopPropagation();"确保不对包含div的处理程序进行调用。

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));
}

#div1,
#div2 {
  float: left;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  display: inline-block;
}
.drop {
width:100px;
height:50px;
display:block;
border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background:#fafafa;width:100%;height:440px;padding-top:10px;">
  <div style="text-align:center;width:49%;height: 100%;display:inline-block;border-right:1px solid #e0e0e0;">
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <span class="drop" draggable="true" ondragstart="drag(event)" id="drag1" data-orderID="1">SPAN 1</span>
    </div>
  </div>
  <div style="text-align:center;width:49%;height: 100%;display:inline-block;">
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
      <span class="drop" ondrop="event.stopPropagation();" draggable="true" ondragstart="drag(event)" id="drag2"  data-orderID="2">SPAN 2</span>
    </div>
  </div>
</div>

Answer 2

您的放置事件是在span而非包含div上触发的。 因此，被拖动的元素会附加到被拖动到的跨度上。

您可以通过更改行来防止这种情况

ev.target.appendChild(document.getElementById(data)); 至 ev.target.closest('div').appendChild(document.getElementById(data));