我在Wordpress工作,我试着把它做好,所以当其中一个拖放在另一块的位置上时,他们交换位置,但是每次我丢下一块,什么都不会发生。下面是CSS部分,JS部分和html part.Each
部分是一个小图片,其中隐藏的文本也在div中。如果需要更多的信息,请自由地询问他们。
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>
发布于 2022-03-14 22:02:31
<script>
标记或文件。on*
事件处理程序)style
属性。
CSS应该只在一个地方,这是它各自的<style>
标记或文件。addEvents()
)上重新分配事件:
// 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>
https://stackoverflow.com/questions/71469842
复制相似问题