Tartalomjegyzék

Drag and Drop
- A HTML
- Stílus
- JavaScript
- Linkek

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.

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.

Stílus

src/style.css

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

Linkek