中斷拖放范圍

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

您的drop事件是在span而不是包含div上觸發的。 因此，拖動的元素將附加到其拖動到的跨度上。

您可以通過更改行來防止這種情況

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