jQuery DragZone

by Francis Rodrigues

HTML

<div id="dragZone">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></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
}
.top {
    z-index: 100!important;
    position: relative
}
.bottom {
    z-index: 10!important;
    position: relative
}

JavaScript

$(document).ready(function () {
    $('#box1,#box2,#box3,#box4').draggable({
        stack: "div"
    });

});