JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<div id="draggable" draggable="false">Hold mouse left button (and don't move) during 500 ms</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

draggable.onmousedown = function(e) {
    setTimeout(function(){
        draggable.draggable = true;
        draggable.textContent = 'Now should be able to drag me';
    }, 500);
}
draggable.ondragstart = function(e) {
    e.dataTransfer.setData("Text", 'abc');
}