Drag and drop 2 boxes

Question

I have a blue and a red box. I would like to drag and drop them, so that they can be switched. For now, I can drag the left box and drop it in the right box. That works fine but I cannot drag the right box and drop it in the left box.

 // 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/

Why can I drop the left box but not the right one?

Answer 1

It just because you do

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

which always add item as last children... So moved element will be always last - that's why if you move second item, it will still be displayed as second. From the pure code perspective, everything works.

Answer 2

you could see if the target is the first element of the parent, and if so add:

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