Reset Multiple div Positions on Button Click

by Akram kamal

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="yellowBox">

    <div id="box1" class="redBox">Drag Me</div>
    <div id="box2" class="redBox">Drag Me</div>
    <div id="box3" class="redBox">Drag Me</div>
    <div id="box4" class="redBox">Drag Me</div>

</div>

<div id="dropZoneContainer">

    <div id="dropLeft">Drop Left</div>
    <div id="dropMiddle">Drop Middle</div>
    <div id="dropRight">Drop Right</div>

</div>

<button id="reset">Click here to Reset divs</button>

CSS

body {
    font-family: sans-serif;
    margin: 0;
}

#yellowBox {
    position: relative;
    top: 50px;
    left: 50px;
    width: 490px;
    height: 340px;
    background-color: #fcf201;
    display: inline-block;
}

.redBox {
    position: relative;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
    background-color: #ff0000;
    display: inline-block;
    float: left;
    cursor: pointer;
    text-align: center;
    color: #fff;
}

#box1 {
    background-color: #ff0000;
}

#box2 {
    background-color: #01bc10;
}

#box3 {
    background-color: #034ad0;
}

#box4 {
    background-color: #ce00ff;
}

#dropZoneContainer {
    position: relative;
    top: 50px;
    left: 100px;
    width: 530px;
    height: 340px;
    display: inline-block;
    background-color: #ccccc8;
}

#dropLeft {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
    background-color: #aaff00;
    text-align: center;
}

#dropMiddle {
    position: absolute;
    top: 20px;
    left: 190px;
    width: 150px;
    height: 150px;
    background-color: #ff9300;
    text-align: center;
}

#dropRight {
    position: absolute;
    top: 20px;
    left: 360px;
    width: 150px;
    height: 150px;
    background-color: #00b1ff;
    text-align: center;
}

#reset {
    position: absolute;
    top: 450px;
    left: 50px;
}

JavaScript

$(".redBox").draggable({
    stack: '.redBox'
});


$(".redBox").data({
    'originalLeft': $(".redBox").css('left'),
    'origionalTop': $(".redBox").css('top')
});

$("#reset").click(function() {
    var boxes = $(".redBox").removeAttr("style").get().sort(function(a, b) {
        return a.id < b.id ? -1:+1
    })
    console.log(boxes)
    $(boxes).appendTo("#yellowBox")
});


// Droppable Areas

$("#dropLeft").droppable({
    drop: function(event, ui) {
        $(ui.draggable).detach().css({
            top: 0,
            left: 0
        }).appendTo(this)

        var leftNumber = $.trim(ui.draggable.text());

    }
});


$("#dropMiddle").droppable({
    drop: function(event, ui) {
        $(ui.draggable).detach().css({
            top: 0,
            left: 0
        }).appendTo(this)

        var leftNumber = $.trim(ui.draggable.text());

    }
});


$("#dropRight").droppable({
    drop: function(event, ui) {
        $(ui.draggable).detach().css({
            top: 0,
            left: 0
        }).appendTo(this)

        var leftNumber = $.trim(ui.draggable.text());

    }
});