JSFiddle - React, Tailwind, and code Playground

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");
});