JSFiddle - React, Tailwind, and code Playground

by kommandoss

HTML

<div id="inventory" style="width:500px; height:500px; margin:10px; padding:15px; border:1px solid black; display:block; clear:both;">
    
   
    <div id="deck">
    
     <div><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" class="circles" alt="" /></div>
    
    <div><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png" class="circles" alt="" /></div>
    
        <div> <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png" class="circles" alt="" /> </div>
    
      <div>     <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png" class="circles" alt="" /> </div>

    
   <div>        <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" class="circles" alt="" /> </div>
    
    <div>       <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png" class="circles" alt="" /> </div>
    
           
     <div>    <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png" class="circles" alt="" /> </div>
    
           
     <div>    <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png" class="circles" alt="" /></div>
        </div>

CSS

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

#deck>div{
    display:inline-block;
}

JavaScript

$(document).ready(function(){
    codeToRun();
    $('.button').click(function(){codeToRun()});
});

function codeToRun(){
   $(document).ready(function() {
    // Fisher–Yates Shuffle (Knuth variant)
    // To shuffle an array a of n elements (indices 0..n-1):
    //   for i from n - 1 downto 1 do
    //        j <- random integer with 0 <= j <= i
    //        exchange a[j] and a[i]

    var a = $("#deck > div").remove().toArray();
    for (var i = a.length - 1; i >= 1; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var bi = a[i];
        var bj = a[j];
        a[i] = bj;
        a[j] = bi;
    }
    $("#deck").append(a);
});
}
    


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);
    });

});