JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<div id="draggable"></div>

CSS

#draggable {
    border: 1px dotted red;
    background: #fee;
    padding: 50px 0;
    text-align: center;
    -moz-user-select: none;
}
#draggable[draggable="true"] {
    background: #FFA3A3;
}

JavaScript

var timerId = null;
var draggable = document.getElementById('draggable');

function disableDrag() {
    draggable.draggable = false;
    draggable.textContent = "Hold mouse left button (and don't move) during 500 ms";
}

function enableDrag() {
    draggable.draggable = true;
    draggable.textContent = "Now should be able to drag me";
}

draggable.onmousedown = function (e) {
    timerId = setTimeout(enableDrag, 500);
}
draggable.ondragstart = function (e) {
    e.dataTransfer.setData("Text", "abc");
}
document.onmouseup = document.ondragend = function (e) {
    clearTimeout(timerId);
    disableDrag();
}

disableDrag();