[[oktatas:web:javascript|< JavaScript]]

====== Drag and Drop ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A HTML =====

A div2 dobozt szeretnénk mozgatni. 

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

  * 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 =====

<code css src/style.css>
#div1 {
    width: 100px;
    height: 50px;
    background-color: aqua;
}

#div2 {
    width: 100px;
    height: 50px;
    background-color:burlywood;
}
</code>

===== JavaScript =====

<code javascript 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()
}
</code>

===== Linkek =====

  * 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)