JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="icon" style="display:block; width:50px; height:50px; border:2px solid #666; cursor:move; text-decoration:none;">Drag Me</a>
<div id="drop" style="width:400px; height:200px; border:1px solid #000;">come on!</div>
<div id="console" style="font-family:Consolas;">Console...</div>

JavaScript

function log(msg){
    $('#console').html($('#console').html() + '<br />' + msg);
    console.log(msg);
}
function dump(obj, name){
    name = name || 'obj';
    if (typeof obj == 'string'){
        return log(name + '="' + obj + '"');
    }
    log(name + ' ' + obj + ' = {');
    for (var key in obj){
        log('&nbsp;&nbsp;' + key + ': ' + obj[key]);
    }
    log('}');
}

log(DragEvent);
var me = document.createEvent('MouseEvent');
//dump(me, 'MouseEvent');

var dm = $('#icon');
//dm[0].setAttribute('draggable', 'true');
dm.bind('mousedown', function(e){
    this.setAttribute('draggable', 'true');
    var de = document.createEvent('DragEvent');
    de.initDragEvent(
        'dragstart', //n DOMString typeArg
        e.bubbles, //, in boolean canBubbleArg
        e.cancelable, //, in boolean cancelableArg
        {}, // in any dummyArg
        e.detail, // in long detailArg
        e.screenX, // in long screenXArg
        e.screenY, // in long screenYArg
        e.clientX, // in long clientXArg
        e.clientY, // in long clientYArg
        e.ctrlKey, // in boolean ctrlKeyArg
        e.ctrlKey, // in boolean altKeyArg
        e.shiftKey, // in boolean shiftKeyArg
        e.metaKey, // in boolean metaKeyArg
        e.button, // in unsigned short buttonArg
        e.relatedTarget, // in EventTarget relatedTargetArg
        {} // in DataTransfer dataTransferArg
    );
    //dump(de, 'DragEvent');
    //dump(de.dataTransfer);
    e.preventDefault();
    this.dispatchEvent(de);
});
dm.bind('dragstart', function(e){
    var e = e.originalEvent || e;
    e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
    e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work 
});
$('#drop').bind('dragover', function(e){
    $(this).html('bingo!');
    return false;
}).bind('dragleave', function(e){
    $(this).html('come on!');
}).bind('drop', function(e){
    e = e.originalEvent || e;
    e.stopPropagation();
   ...