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;
    position: relative;
}

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

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

.draggedover::before {
    content: '';
    background-image: url('http://i.stack.imgur.com/czlkT.jpg');
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
}
#dropMove.draggedover::before {
    background-position: -110px -70px;
}

#dropLive.draggedover::before {
    background-position: -5px -10px;
}

#Dragme {
    background-color: #90ee90;
    border: solid 2px #006400;
    cursor: pointer;
    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) {
    $(this).addClass('draggedover');                    
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}).bind('drop', function (e) {
    $(this).removeClass('draggedover');
    $(e.currentTarget).append($('#Dragme').remove());    
    return false;
});

$('.drop').bind('dragleave', function (e) {
    $(this).removeClass('draggedover');
});