拖放 2 個框

Question

我有一個藍色和一個紅色的盒子。 我想拖放它們，以便它們可以切換。 現在，我可以拖動左邊的框並將其放到右邊的框中。 這工作正常，但我無法拖動右側的框並將其放在左側的框中。

 // Drag and the drop the items const elements = document.querySelectorAll('#title-drag, #storename-drag'); for (let element of elements) { // Allow the drop element.addEventListener("dragover", function(event) { event.preventDefault(); }, false); element.addEventListener("dragstart", function(event) { event.dataTransfer.setData("text", event.target.id); }, false); element.addEventListener('drop', function(event) { let data = event.dataTransfer.getData("text"); console.log(event.target.className); event.preventDefault(); element.appendChild(document.getElementById(data)); }); }

 #title { background: red; } #storename { background: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <!-- Title --> <div class="row"> <div id="title-drag"> <div class="col-md-3" draggable="true" id="title"> <div class="mg-item-inner"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'> <span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren"> <i class="fas fa-swatchbook"></i></button> </div><!-- /btn-group --> <div class="input-group" role="group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button> <ul class="dropdown-menu"> <li><a href="#">prefix</a></li> <li><a href="#">suffix</a></li> <li><a href="#">none</a></li> </ul> </div><!-- /input-btn-group --> <input type="text" class="form-control"> </div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span> </div><!-- /mg-item-inner --> </div><!-- /mg-item --> </div> <!--STORE NANE --> <div id="storename-drag"> <div class="col-md-3" draggable="true" id="storename"> <div class="mg-item-inner"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'> <span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren"> <i class="fas fa-swatchbook"></i></button> </div><!-- /btn-group --> <div class="input-group" role="group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button> <ul class="dropdown-menu"> <li><a href="#">prefix</a></li> <li><a href="#">suffix</a></li> <li><a href="#">none</a></li> </ul> </div><!-- /input-btn-group --> <input type="text" class="form-control"> </div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span> </div><!-- /mg-item-inner --> </div><!-- /mg-item --> </div> </div> </div>

https://jsfiddle.net/Lb8e0pz3/

為什么我可以放下左邊的框而不能放下右邊的？

Answer 1

只是因為你這樣做

element.appendChild(document.getElementById(data));

它總是將項目添加為最后一個孩子......所以移動的元素將始終是最后一個 - 這就是為什么如果你移動第二個項目，它仍然會顯示為第二個。 從純代碼的角度來看，一切正常。

Answer 2

您可以查看目標是否是父元素的第一個元素，如果是，則添加：

if (isFirstElement(event.target)) {   // implement function
  element.parentNode.prepend(document.getElementById(data+'-drag'));
} else {
  element.parentNode.appendChild(document.getElementById(data+'-drag'));
}