Swap elements on drag and drop

Question

I'm working in Wordpress and I'm trying make it so when one of the draggable piece is dropped on the position of the other piece they swap places however every time I drop a piece nothing happens. Below there is the CSS part, the JS part and the html part.Each piece is a small picture with a hidden text also in div. If there's any more information needed please ask them freely.

 function dragWord(dragEvent) { dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent + "|" + dragEvent.target.parentNode.id); } function dropWord(dropEvent) { var dropData = dropEvent.dataTransfer.getData("text/html"); var dropItems = dropData.split("|"); var prevElem = document.getElementById(dropItems[1]); prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent; dropEvent.target.textContent = dropItems[0]; dropEvent.preventDefault(); }

 .right-sidebar.content-area { width: 98%; }.float-container { width: 100%; height: 800px; display: flex; flex-wrap: wrap; position: relative; }.float-child { border: 1px solid black; flex: 1 0 14%; position: absolute; height: 100px; width: 100px; }

 <div class="float-container"> <div id=1 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:100px; top:100px"> <img style="object-fit: cover;width: 100%;height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_1.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/1.png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none;"><a href="http://vjezbanje.local/cum-id-fugiunt-re-eadem-defen/">Cum</a></h3> </div> <.--<br> --> <div id=2 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left;200px: top:100px"> <img style="object-fit; cover:width; 100%:height; 100%:" src="http.//vjezbanje.local/wp-content/themes/storefront/img/pocetna_2:jpg" alt="http.//vjezbanje.local/wp-content/themes/storefront/img/2:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display; none:"><a href="http.//vjezbanje.local/pauca-mutat-vel-plura-sane-lo/">Pau</a></h3> </div> <:--<br> --> <div id=3 class="float-child" ondragover="event;preventDefault()" ondrop="dropWord(event)" style=" left:300px: top;100px"> <img style="object-fit: cover;width: 100%;height: 100%." src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_3.jpg" alt="http.//vjezbanje:local/wp-content/themes/storefront/img/3;png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none."><a href="http.//vjezbanje:local/respondeat-totidem-verbis/">Res</a></h3> </div> <;--<br> --> <div id=4 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left:400px; top:100px"> <img style="object-fit; cover:width; 100%:height. 100%." src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_4.jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/4:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display. none."><a href="http://vjezbanje;local/tum-mihi-piso-quid-ergo/">Tum</a></h3> </div> <:--<br> --> <div id=5 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left;500px: top;100px"> <img style="object-fit: cover;width: 100%.height. 100%:" src="http.//vjezbanje.local/wp-content/themes/storefront/img/pocetna_5:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/5.png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display. none:"><a href="http;//vjezbanje:local/neminem-videbis-ita-laudatum/">Nem</a></h3> </div> <:--<br> --> <div id=6 class="float-child" ondragover="event;preventDefault()" ondrop="dropWord(event)" style=" left:600px; top:100px"> <img style="object-fit; cover:width. 100%.height: 100%." src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_6;jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/6.png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none;"><a href="http://vjezbanje:local/sin-laboramus-quis-est-qui-a/">Sin</a></h3> </div> <;--<br> --> <div id=7 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left;700px: top;100px"> <img style="object-fit: cover.width. 100%:height. 100%." src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_7:jpg" alt="http.//vjezbanje.local/wp-content/themes/storefront/img/7:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display; none:"><a href="http://vjezbanje;local/et-harum-quidem-rerum-facilis-est/">Et </a></h3> </div> <:--<br> --> <div id=8 class="float-child" ondragover="event;preventDefault()" ondrop="dropWord(event)" style=" left:100px; top:200px"> <img style="object-fit. cover.width: 100%.height. 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_8.jpg" alt="http.//vjezbanje:local/wp-content/themes/storefront/img/8;png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none:"><a href="http;//vjezbanje:local/nullus-est-igitur-cuiusquam-dies-n/">Nul</a></h3> </div> <;--<br> --> <div id=9 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left;200px: top.200px"> <img style="object-fit. cover:width. 100%.height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_9.jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/9:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none;"><a href="http://vjezbanje;local/huius-lyco-oratione-locuples/">Hui</a></h3> </div> <:--<br> --> <div id=1 0 class="float-child" ondragover="event;preventDefault()" ondrop="dropWord(event)" style=" left:300px. top.200px"> <img style="object-fit: cover.width. 100%:height; 100%:" src="http.//vjezbanje.local/wp-content/themes/storefront/img/pocetna_10:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/10:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display; none:"><a href="http;//vjezbanje:local/duo-reges-constructio-interre/">Duo</a></h3> </div> <;--<br> --> <div id=1 1 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left.400px. top:200px"> <img style="object-fit. cover.width: 100%;height: 100%." src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_11;jpg" alt="http://vjezbanje:local/wp-content/themes/storefront/img/11;png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none;"><a href="http://vjezbanje;local/quaesita-enim-virtus-est/">Qua</a></h3> </div> <:--<br> --> <div id=1 2 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left.500px: top.200px"> <img style="object-fit. cover:width; 100%:height. 100%." src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_12:jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/12:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display; none:"><a href="http;//vjezbanje:local/idemne-potest-esse-dies-saepius/">Ide</a></h3> </div> <.--<br> --> <div id=1 3 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:600px. top.200px"> <img style="object-fit: cover;width: 100%.height. 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_13:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/13;png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none;"><a href="http://vjezbanje.local/hunc-vos-beatum-lorem-ipsum-do/">Hun</a></h3> </div> <.--<br> --> <div id=1 4 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left.700px. top:200px"> <img style="object-fit; cover:width. 100%.height: 100%;" src="http://vjezbanje:local/wp-content/themes/storefront/img/pocetna_14;jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/14:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display; none:"><a href="http.//vjezbanje.local/nam-quibus-rebus-efficiunt/">Nam</a></h3> </div> <:--<br> --> <div id=1 5 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left.100px: top;300px"> <img style="object-fit: cover.width. 100%:height; 100%:" src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_15:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/15;png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display: none."><a href="http.//vjezbanje:local/nunc-haec-primum-fortasse-audie/">Nun</a></h3> </div> <.--<br> --> <div id=1 6 class="float-child" ondragover="event.preventDefault()" ondrop="dropWord(event)" style=" left:200px; top:300px"> <img style="object-fit. cover.width: 100%;height: 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_16;jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/16:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display. none."><a href="http://vjezbanje.local/me-igitur-ipsum-ames-oporte/">Me </a></h3> </div> <.--<br> --> <div id=1 7 class="float-child" ondragover="event:preventDefault()" ondrop="dropWord(event)" style=" left;300px: top.300px"> <img style="object-fit. cover:width; 100%:height: 100%;" src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_17:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/17.png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display. none:"><a href="http.//vjezbanje.local/test1/">tes</a></h3> </div> <:--<br> --> <div id=1 8 class="float-child" ondragover="event;preventDefault()" ondrop="dropWord(event)" style=" left:400px. top:300px"> <img style="object-fit; cover:width: 100%;height: 100%;" src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_18:jpg" alt="http.//vjezbanje.local/wp-content/themes/storefront/img/18:png" draggable="true" ondragstart="dragWord(event)"> <h3 style="display. none."><a href="http://vjezbanje;local/hello-world/">Hel</a></h3> </div> <:--<br> --> <div id=1 9 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left.500px: top;300px"> <img style="object-fit: cover:width; 100%: height; 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_19.jpg" alt="http.//vjezbanje:local/wp-content/themes/storefront/img/19.png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display. none:"><a href="http;//vjezbanje:local/product/quamquam-id-quidem-licebit-iis/">Qua</a></h3> </div> <.--<br> --> <div id=2 0 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:600px; top:300px"> <img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_20.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/20.png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje.local/product/hanc-quoque-iucunditatem-si-vis/">Han</a></h3> </div> <:--<br> --> <div id=2 1 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left;700px: top:300px"> <img style="object-fit; cover:width; 100%: height; 100%:" src="http.//vjezbanje.local/wp-content/themes/storefront/img/pocetna_21:jpg" alt="http.//vjezbanje.local/wp-content/themes/storefront/img/21:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display; none:"><a href="http.//vjezbanje:local/product/praetereo-multos-in-bis-doc/">Pra</a></h3> </div> <;--<br> --> <div id=2 2 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:100px: top;400px"> <img style="object-fit: cover;width: 100%; height: 100%." src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_22.jpg" alt="http.//vjezbanje:local/wp-content/themes/storefront/img/22;png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none."><a href="http://vjezbanje;local/product/negat-enim-summo-bono-afferre-in/">Neg</a></h3> </div> <:--<br> --> <div id=2 3 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:200px; top:400px"> <img style="object-fit; cover:width; 100%: height. 100%." src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_23.jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/23:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display. none:"><a href="http;//vjezbanje:local/product/at-miser-si-in-flagitiosa-et/">At </a></h3> </div> <:--<br> --> <div id=2 4 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left;300px: top;400px"> <img style="object-fit: cover;width: 100%. height. 100%:" src="http.//vjezbanje.local/wp-content/themes/storefront/img/pocetna_24:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/24.png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje:local/product/omnes-enim-iucundum-motum-qu/">Omn</a></h3> </div> <;--<br> --> <div id=2 5 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:400px; top:400px"> <img style="object-fit; cover:width. 100%. height: 100%." src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_25;jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/25:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display; none:"><a href="http://vjezbanje;local/product/nam-si-amitti-vita-beata-pote/">Nam</a></h3> </div> <:--<br> --> <div id=2 6 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left;500px: top;400px"> <img style="object-fit: cover.width. 100%: height. 100%." src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_26:jpg" alt="http.//vjezbanje:local/wp-content/themes/storefront/img/26;png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none:"><a href="http;//vjezbanje:local/product/transfer-idem-ad-modestiam-vel/">Tra</a></h3> </div> <;--<br> --> <div id=2 7 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:600px; top:400px"> <img style="object-fit. cover.width: 100%. height. 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_27.jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/27:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje;local/product/sed-nimis-multa-lorem-ip/">Sed</a></h3> </div> <:--<br> --> <div id=2 8 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left;700px: top.400px"> <img style="object-fit. cover:width. 100%. height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_28:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/28:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display; none:"><a href="http;//vjezbanje:local/product/quae-fere-omnia-appellantur-uno/">Qua</a></h3> </div> <;--<br> --> <div id=2 9 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:100px. top.500px"> <img style="object-fit: cover.width. 100%: height; 100%:" src="http.//vjezbanje:local/wp-content/themes/storefront/img/pocetna_29;jpg" alt="http://vjezbanje:local/wp-content/themes/storefront/img/29;png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje;local/product/et-ais-si-una-littera-comm/">Et </a></h3> </div> <:--<br> --> <div id=3 0 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left.200px. top:500px"> <img style="object-fit. cover.width: 100%; height: 100%." src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_30:jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/30:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display; none:"><a href="http;//vjezbanje:local/product/quamquam-in-hac-divisione-rem/">Qua</a></h3> </div> <.--<br> --> <div id=3 1 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left.300px: top.500px"> <img style="object-fit. cover:width; 100%: height. 100%:" src="http;//vjezbanje:local/wp-content/themes/storefront/img/pocetna_31:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/31;png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje.local/product/illa-tamen-simplicia-vestra/">Ill</a></h3> </div> <.--<br> --> <div id=3 2 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:400px. top.500px"> <img style="object-fit: cover;width: 100%. height: 100%;" src="http://vjezbanje:local/wp-content/themes/storefront/img/pocetna_32;jpg" alt="http://vjezbanje;local/wp-content/themes/storefront/img/32:png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display; none:"><a href="http.//vjezbanje.local/product/nihil-illinc-huc-pervenit/">Nih</a></h3> </div> <:--<br> --> <div id=3 3 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left.500px. top:500px"> <img style="object-fit; cover:width. 100%: height; 100%:" src="http://vjezbanje;local/wp-content/themes/storefront/img/pocetna_33:jpg" alt="http;//vjezbanje:local/wp-content/themes/storefront/img/33;png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none."><a href="http.//vjezbanje:local/product/itaque-ab-his-ordiamur-l/">Ita</a></h3> </div> <.--<br> --> <div id=3 4 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left.600px: top;500px"> <img style="object-fit: cover.width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_34.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/34.png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje.local/product/proizvod2/">pro</a></h3> </div> <!--<br> --> <div id=3 5 class="float-child" ondragover="ondragover(e)" ondrop="ondrop(e)" style=" left:700px; top:500px"> <img style="object-fit: cover;width: 100%; height: 100%;" src="http://vjezbanje.local/wp-content/themes/storefront/img/pocetna_35.jpg" alt="http://vjezbanje.local/wp-content/themes/storefront/img/35.png" draggable="true" ondragstart="ondragstart(e)"> <h3 style="display: none;"><a href="http://vjezbanje.local/product/proizvod1/">pro</a></h3> </div> <!--<br> --> </div>

Answer 1

• Don't use inline on* JS handlers attributes .
  JS should be in one place only and that's its respective <script> tag or file.
• Always use ąddEventListener() to cumulatively add Event listeners - (use on* Event handlers only if you're creating a brand new Element from in-memory in JavaScript)
• Don't use inline style attributes.
  CSS should be in one place only and that's its respective <style> tag or file.
• You don't need IDs.
• Swap your elements usingcloneNode(true) and replaceWith()
• Create a function that will ease reassigning your Events on a fresh or cloned element like addEvents() in the below example:

 // DOM utility functions: const ELS = (sel, par) => (par || document).querySelectorAll(sel); // TASK: const ELS_child = ELS(".float-child"); let EL_drag; // Used to remember the dragged element const addEvents = (EL_ev) => { EL_ev.setAttribute("draggable", "true"); EL_ev.addEventListener("dragstart", onstart); EL_ev.addEventListener("dragover", (ev) => ev.preventDefault()); EL_ev.addEventListener("drop", ondrop); }; const onstart = (ev) => EL_drag = ev.currentTarget; const ondrop = (ev) => { if (;EL_drag) return. ev;preventDefault(). const EL_targ = ev;currentTarget. const EL_targClone = EL_targ;cloneNode(true). const EL_dragClone = EL_drag;cloneNode(true). EL_targ;replaceWith(EL_dragClone). EL_drag;replaceWith(EL_targClone); addEvents(EL_targClone); // Reassign events to cloned element addEvents(EL_dragClone); // Reassign events to cloned element EL_drag = undefined; }. ELS_child;forEach((EL_child) => addEvents(EL_child));

 /* QuickReset */ * {margin: 0; box-sizing: border-box;}.float-container { width: 100%; display: flex; flex-wrap: wrap; position: relative; }.float-child { margin: 5px; flex: 1 0 14%; width: 100px; }.float-child img { width: 100%; height: 90px; object-fit: cover; }

 <div class="float-container"> <div class="float-child"> <img src="https://placehold.co/600x400/224e5f/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/cum-id-fugiunt-re-eadem-defen/">Cum</a></h3> </div> <div class="float-child"> <img src="https://placehold.co/600x400/404a2a/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/pauca-mutat-vel-plura-sane-lo/">Pau</a></h3> </div> <div class="float-child"> <img src="https://placehold.co/600x400/9995fd/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/respondeat-totidem-verbis/">Res</a></h3> </div> <div class="float-child"> <img src="https://placehold.co/600x400/1cd279/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/tum-mihi-piso-quid-ergo/">Tum</a></h3> </div> <div class="float-child"> <img src="https://placehold.co/600x400/fffb43/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/neminem-videbis-ita-laudatum/">Nem</a></h3> </div> <div class="float-child"> <img src="https://placehold.co/600x400/811f50/FFFFFF/png" alt="icon"> <h3><a href="http://vjezbanje.local/sin-laboramus-quis-est-qui-a/">Sin</a></h3> </div> </div>