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 everytime 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.
HTML
<div class="float-container" ondrop="drop(event)" ondragover="allowDrop(event)">
<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 = 10 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 = 11 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 = 12 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 = 13 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 = 14 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 = 15 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 = 16 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 = 17 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 = 18 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 = 19 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 = 20 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 = 21 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 = 22 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 = 23 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 = 24 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 = 25 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 = 26 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 = 27 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 = 28 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 = 29 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 = 30 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 = 31 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 = 32 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 = 33 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 = 34 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 = 35 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>
CSS
.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;
}
Javascript
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();
}