JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<div class="dropzone">
    <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

drag
dragstart
dragend
dragover
dragenter
dragleave
drop

CSS

#draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
}
.dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
}

JavaScript

var drag;

/* events fired on the draggable target */
document.addEventListener("drag", function (e) {}, false);
document.addEventListener("dragend", function (e) {}, false);

document.addEventListener("dragstart", function (e) {
    drag = e.target;
    e.dataTransfer.setData('text/plain', e.target)
}, false);
 

/* events fired on the drop targets */
document.addEventListener("dragover", function (e) {
    // prevent default to allow drop
    e.preventDefault();
}, false);

document.addEventListener("dragenter", function (event) {
    // highlight potential drop target when the draggable element enters it
    if (event.target.className == "dropzone") {
        event.target.style.background = "purple";
    }

}, false);

document.addEventListener("dragleave", function (event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "dropzone") {
        event.target.style.background = "";
    }

}, false);

document.addEventListener("drop", function (e) {
    // prevent default action (open as link for some elements)
    e.preventDefault();
    // move dragged elem to the selected drop target
    if (e.target.className == "dropzone") {
        e.target.style.background = "";
        
        drag.parentNode.removeChild(drag);
        e.target.appendChild(drag);
    }

}, false);