Drag и Drop API в HTML

Создание интерактивных интерфейсов с перетаскиванием.

Базовый пример:

<div class="container">
    <div id="drag1" draggable="true" ondragstart="drag(event)">
        Перетащи меня
    </div>
    
    <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
        Брось сюда
    </div>
</div>

<style>
#drag1 { 
    width: 100px; 
    padding: 10px; 
    background: lightblue; 
    margin: 10px;
}
#dropzone { 
    width: 200px; 
    height: 100px; 
    padding: 10px; 
    border: 2px dashed #ccc; 
}
</style>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    const data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>