JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div id="circles" style="width:150px; padding:10px; height:150px; margin:10px; border:1px solid black; float:left;"></div>

<div id="inventory" style="width:500px; height:500px; margin:10px; padding:15px; border:1px solid black; display:block; clear:both;">
    
   
    
    
   <img src="http://www.tutorialsscripts.com/free-icons/alphabet-characters/upper-case-letter/A-icon/blue-capital-letter-character-A-icon-128-x-128.gif" class="circles"  alt="" />
  
    
    
     <img src="http://www.yourfamilytreemag.co.uk/files/2010/08/Letter_B-128x128.jpg" class="circles" alt="" />
   

      <img src="http://www.tutorialsscripts.com/free-icons/alphabet-characters/upper-case-letter/C-icon/red-capital-letter-character-C-icon-128-x-128.gif" class="circles" alt="" />
 
    
    <img src="http://www.tutorialsscripts.com/free-icons/alphabet-characters/upper-case-letter/D-icon/purple-large-letter-character-D-icon-128-x-128.gif" class="circles" alt="" />
   
         
         
    <img src="http://www.tutorialsscripts.com/free-icons/alphabet-characters/upper-case-letter/E-icon/blue-large-letter-character-E-icon-128-x-128.gif" class="circles" alt="" />
   
         
         
        <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" class="circles" alt="" />

CSS

*{
padding:0;
margin:0;
}
p{
margin:10px;
}
body{ font-family:Verdana; font-size:12px; }
img{ cursor: pointer; }

JavaScript

function itemInSpot(drag_item, spot) {
    var oldSpotItem = $(spot).find('img');
    if (oldSpotItem.length > 0) {
        oldSpotItem.appendTo('#inventory').draggable({
            revert: 'invalid'
        });
    }
    var item = $('<img />');
    item.attr('src', drag_item.attr('src')).attr('class', drag_item.attr('class')).appendTo(spot).draggable({
        revert: 'invalid'
    });
    drag_item.remove(); // remove the old object
}

$(document).ready(function() {
    $(".circles").draggable({
        revert: 'invalid'
    });
    $('#inventory').droppable();
    $("#circles").droppable({
        accept: '.circles'
    })
    $('#circles,#inventory').bind('drop', function(ev, ui) {
        itemInSpot(ui.draggable, this);
    });



});