JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<div id="box-container">
    <div id="box0" class="box">1</div>
    <div id="box1" class="box">2</div>
    <div id="box2" class="box">3</div>
    <div id="box3" class="box">4</div>
    <div id="box4" class="box">5</div>
</div>

CSS

body, html{
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    position: relative;
}
#box-container{
    height: 100%;
    width: 100%;
}
.box{
    background: #FF0000;
    border: 1px solid #000;
    color: #FFF;
    font-family: Arial;
    height: 100px;
    line-height: 100px;
    position: absolute;
    text-align: center;
    width: 100px;
}

JavaScript

var position;
var posX = 0, posY = 0;
var elem;
var container = $("#box-container");
var w = container.width();
var h = container.height();
var zindex = 1;

//---Create instances
$(".box").each(function(){    

   	$(this).css({

        top : parseInt(Math.random() * (w - 100)) + "px",
        left: parseInt(Math.random() * (h - 100)) + "px"

    });

});

//---Build hammer
var hammertime = Hammer($("#box-container")[0], {

    threshold: 0

});

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

hammertime.on('panstart panmove', function(evt) {

    elem = $(evt.target);

    if(elem.hasClass("box")){

        switch(evt.type){

            case 'panstart':
                zindex++;
                elem.css("z-index", zindex);
                position = elem.position();
            break;

            case 'panmove':
                elem.css({
                    
                    top : (position.top + evt.deltaY) + "px",
                    left : (position.left + evt.deltaX) + "px"

                });
            break;

        }

    }

});