JSFiddle - React, Tailwind, and code Playground

by itaylor

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>draggable=true :active Bug</title>
  </head>
  <body>
    <div id="spacer">
      <div id="dragElem" draggable="true">Drag me<div>
    </div>
  </body>
</html>

CSS

#spacer {width:300; margin:200px auto; background:#ccc;}
#dragElem {
 cursor:-webkit-grab; cursor:-moz-grab;
 text-align:center;
 width:200px; height:100px; 
 background:pink; border:1px solid red;
}
#dragElem:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    background:lightgreen;
}

JavaScript

var dragElem = document.getElementById("dragElem");
dragElem.addEventListener("dragstart", function (e){
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text', "test");
});