• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Szerkesztve: 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A div2 dobozt szeretnénk mozgatni.

src/index.html

<!-- ... -->
      <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.

src/style.css

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

src/app.js

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()
}

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API (2024)
• https://web.dev/articles/drag-and-drop (2024)
• https://www.w3schools.com/html/html5_draganddrop.asp (2024)