JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div id="dragZone">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>    
</div>

CSS

#box1 {width: 150px; height: 150px; background-color: red; position: absolute; top: 0px; left: 0px; z-index: 0}
#box2 {width: 150px; height: 150px; background-color: green; position: absolute; top: 20px; left: 50px; z-index: 0}
#box3 {width: 150px; height: 150px; background-color: yellow; position: absolute; top: 50px; left: 100px; z-index: 0}
#box4 {width: 150px; height: 150px; background-color: blue; position: absolute; top: 70px; left: 200px; z-index: 0}
#box5 {width: 150px; height: 150px; background-color: grey; position: absolute; top: 70px; left: 200px; z-index: 0}
#box6 {width: 150px; height: 150px; background-color: cyan; position: absolute; top: 70px; left: 200px; z-index: 0}
#box7 {width: 150px; height: 150px; background-color: orange; position: absolute; top: 70px; left: 200px; z-index: 0}
.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}

JavaScript

$(document).ready(function() {
    var a = 1;
    $('#box1,#box2,#box3,#box4,#box5,#box6, #box7').draggable({
        start: function(event, ui) { $(this).css("z-index", a++); }
    });
});