JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragstart" class="fail">S</div>
<div id="drag" class="fail">D</div>
<div id="dragend" class="fail">E</div>
<div id="draggable"></div>
<button id="reset">Reset</button>

CSS

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#draggable {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50px;
    left: 10px;
    border: 1px solid black;
}
#dragstart, #drag, #dragend {
    height: 20px;
    width: 20px;
    float: left;
    margin-left: 10px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}
.fail {
    background: #ce2d2d;
}
.pass {
    background: #267f26;
}
#reset {
    position: absolute;
    top: 170px;
    left: 20px;
}
}

JavaScript

// Get all interesting Elements
var oDraggable = document.getElementById("draggable");
var oDragstart = document.getElementById("dragstart");
var oDrag = document.getElementById("drag");
var oDragend = document.getElementById("dragend");
var oReset = document.getElementById("reset");
var dataTransfer = new DataTransfer();

// Compute the mouse offset
var oBoundingClientRect = oDraggable.getBoundingClientRect();
var mStartPos = {
    top: oBoundingClientRect.top,
    left: oBoundingClientRect.left
};

// Drag-related handlers
var fnDragstart = function (oEvent) {
    oDragstart.className = "pass";
    oEvent.dataTransfer.setData('text/test', 'Huhu');
};

var fnDrag = function (oEvent) {
    oDrags.className = "pass";
};

var fnDragend = function (oEvent) {
    oDraggable.setAttribute("draggable", false);
    oDragend.className = "pass";
    console.log(oEvent.dataTransfer.getData('text/test'));
};

// Mouse-related handlers
var fnMousedown = function (oEvent) {
    document.addEventListener("mousemove", fnMousemove);
    mStartPos.top += oEvent.offsetY;
    mStartPos.left += oEvent.offsetX;
};

var fnMousemove = function (oEvent) {
    var iTopDiff = Math.abs(oEvent.pageY - mStartPos.top);
    var iLeftDiff = Math.abs(oEvent.pageX - mStartPos.left);
    if (iTopDiff > 50 || iLeftDiff > 50) {
        document.removeEventListener("mousemove", fnMousemove);
        oDraggable.setAttribute("draggable", true);
        oDraggable.addEventListener("dragstart", fnDragstart);
        oDraggable.addEventListener("drag", fnDrag);
        oDraggable.addEventListener("dragend", fnDragend);

        // Fire a dragstart event, now that we know what to do with it
        var e = new DragEvent("dragstart", {"dataTransfer": dataTransfer}); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);
    }
};

var fnMouseup = function (oEvent) {
    document.removeEventListener("mousemove", fnMousemove);
    var e = new DragEvent("dragend", {"dataTransfer": dataTransfer}); //$NON-NLS-1$
     ...