JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop" id="dropMove">Drop Move</div>
<div class="drop" id="dropLive">Drop Link</div>
<div style="clear:both">
<a draggable="true" href="#" id="Dragme">Drag Me</a>

CSS

.drop {
    height: 150px;
    margin-bottom: 14px;
    padding: 7px;
    width: 150px;
    margin: 0 10px 10px 0;
    float: left;
    
}

#dropMove {
    background-color: #add8e6;
    border: solid 2px darkblue;    
}

#dropLive {
    background-color: #e6d8ad;
    border: solid 2px darkred;
}

#Dragme {
    background-color: #90ee90;
    border: solid 2px #006400;
    cursor: none;
    display: block;
    height: 70px;
    width: 70px;    
    line-height: 70px;
    text-align: center;
    text-decoration: none;
    color: #000;
}

JavaScript

$('#Dragme').bind('dragstart', function (e) {
    var dt = e.originalEvent.dataTransfer;
    dt.effectAllowed = 'linkMove';
    // Setting data is required for firefox to get drag and drop working...
    dt.setData('Text', 'Firefox');      
    element.css({opacity: .5});
}).bind('dragend', function () {
    element.css({opacity: 1});
});

$('.drop').bind('dragover', function (e) {
    if (e.currentTarget.id == 'dropMove') {
        e.originalEvent.dataTransfer.dropEffect = 'move';
    } else {
        e.originalEvent.dataTransfer.dropEffect = 'link';
    }
                        
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}).bind('drop', function (e) {
    $(e.currentTarget).append($('#Dragme').remove());    
    return false;
});