JSFiddle - React, Tailwind, and code Playground

by ingro

HTML

<div id="grid">                
    <img src="http://placehold.it/128x128/800000" alt="" style="position:absolute;top:0;left:0;">
    <img src="http://placehold.it/128x128/008000" alt="" style="position:absolute;top:0;left:160px;">
</div>

CSS

#grid {
    width:641px;
    height:769px;
    background:url(http://img543.imageshack.us/img543/7214/grid1.gif) repeat scroll 0 0;
    position:relative;
    overflow:hidden;
}

JavaScript

var zIndex = 0;
$('#grid img').draggable({ 
    stack: 'img',   
    cursor: 'pointer',   
    start: function(e, ui) {    
        zIndex = -100;                
        $('#grid img').each(function(){
            $(this).css({
                zIndex: ++zIndex
            });
        });                    
    },
    stop: function(e, ui) {                    
        $('#grid img').css({
            zIndex: 0                        
        });
    },    
    drag: function(e, ui) {
        ui.position.left = Math.floor(ui.position.left / 32) * 32;
        ui.position.top = Math.floor(ui.position.top / 32) * 32;
    }
});