< JavaScript

Drag and Drop

Szerző: Sallai András

Copyright © 2024, Sallai András

Szerkesztve: 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A HTML

A div2 dobozt szeretnénk mozgatni.

<!-- ... --> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" draggable="true" ondragstart="drag(event)"></div> <!-- ... -->

Elsőként mondjuk meg, hogy mozgatható a div2 doboz: draggable.

Ha elindul a mozgatás szükségünk van a forrásdoboz azonosítójára. A drag() függvényben fogjuk eltenni.

A dobás célján engedélyeztetni kell dobot doboz elfogását: ondragover

Az ondrop eseményre végrehajtódik a drop() függvény, ahol lekérdezzük mit dobtak a div1 dobozra.

Stílus

#div1 { width: 100px; height: 50px; background-color: aqua; } #div2 { width: 100px; height: 50px; background-color:burlywood; }

JavaScript

function drag(event) { event.dataTransfer.setData('actual', event.target.id) } function drop(event) { const data = event.dataTransfer.getData('actual') event.target.appendChild(document.getElementById(data)) console.log(data) } function allowDrop(event) { event.preventDefault() }

Link

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API (2024)