JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://html5demos.com/h5utils.js"></script>
<img src="http://twitter.com/api/users/profile_image/rem" class="img-float drag" id="rem" draggable="true">
<img src="http://twitter.com/api/users/profile_image/brucel" class="img-float drag" id="brucel" draggable="true">
<img src="http://twitter.com/api/users/profile_image/Rich_Clark" class="img-float drag" id="Rich_Clark" draggable="true">
<img src="http://twitter.com/api/users/profile_image/leads" class="img-float drag" id="leads" draggable="true">
<img src="http://twitter.com/api/users/profile_image/akamike" class="img-float drag" id="akamike" draggable="true">
<img src="http://twitter.com/api/users/profile_image/jackosborne" class="img-float drag" id="jackosborne" draggable="true">

<div id="drop"></div>

CSS

#drop {
    min-height: 100px;
    width: 200px;
    border: 3px dashed #ccc;
    margin: 10px;
    padding: 10px;
    clear: left;
}

.shop-container { float: left; border: 1px solid #000; width: 150px; }
        .trash-can { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }
        .img-float { float: right; }
        .droppable { float: left; width: 150px; height: 150px; padding: 0.5em; float: left; }
        .draggable { width: 100px; height: 50px; padding: 0.5em; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px solid #000; }
        .sortable { float: left; width: 150px; min-height: 50px; padding: 0.5em; float: left; margin: 8px 10px 8px 20px; cursor: hand; cursor: pointer; border: 1px dotted red; }

JavaScript

function cancel(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        // store the ID of the element, and collect it on the drop later on
       event.dataTransfer.setData('Text', this.id);
       return false;
    });
}

var drop = document.querySelector('#drop');

// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function (event, ui) {
    if (event.preventDefault) event.preventDefault(); // stops the browser from redirecting off to the text.

   // alert(event.dataTransfer.getData('Text'));
    var tr = event.dataTransfer.getData('Text');
   // var person = people[event.dataTransfer.getData('Text')];
   // this.innerHTML += '<p><a href="test">et voila un test</a></p>';
    //this.innerHTML += '<p><a href="' + person.blog + '">' + person.name + '</a></p>';
    this.innerHTML += '<p><a href="">' + tr + '</a></p>';
    
    $('#' +tr).fadeOut(1000);
    
     var element = ui.draggable;
          //  alert(element);
            $(this).append(element);
            $(ui.draggable).fadeOut(1000); 
    
    return false;
});