Isotope + ui sortable + jgravity

this is a combination of isotope masonry with ui sortable and jgravity

by Alee

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://docs.google.com/uc?authuser=0&amp;id=0B3NX3PHPx2uFQnpsWXJDNzltYzA&amp;export=download"></script>
 <div id="container">
            <div class="bar" id="bar"></div>
            <div class="steady" id="btn1"></div>
            <div class="steady" id="btn2"></div>
            <div class="steady" id="btn3"></div>
            <div class="steady" id="btn4"></div>
            <div class="steady" id="btn5"></div>
        <div id="inner">
            <div class="gravity win" id="div1"></div>
            <div class="gravity open" id="div2"></div>
            <div class="gravity android" id="div3"></div>
            <div class="gravity ios" id="div4"></div>
            <div class="gravity open" id="div5"></div>
            <div class="gravity open" id="div6"></div>
            <div class="gravity client" id="div7"></div>
            <div class="gravity client" id="div8"></div>
            <div class="gravity client" id="div9"></div>
            <div class="gravity client" id="div10"></div>
            <div class="gravity client" id="div11"></div>
            <div class="gravity client" id="div12"></div>
        </div>
    </div>

CSS

body
    {
        height:2000px;
    }

    .gravity
    {
        margin:5px;
    }
    #container
    {
        position:fixed;
    }
#div1{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:50px;
    left:0px;
    width:100px;
    height:100px;
    background-image:url('http://oi59.tinypic.com/23sf6fl.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div2{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:50px;
    left:110px;
    width:100px;
    height:100px;
    background-image:url('http://oi58.tinypic.com/11c63us.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div3{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:50px;
    left:220px;
    width:100px;
    height:100px;
    background-image:url('http://oi58.tinypic.com/256qulz.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div4{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:160px;
    left:0px;
    width:100px;
    height:100px;
    background-image:url('http://oi59.tinypic.com/2wgvshw.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div5{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:160px;
    left:110px;
    width:100px;
    height:100px;
    background-image:url('http://oi62.tinypic.com/2vjyd78.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div6{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:160px;
    left:220px;
    width:100px;
    height:100px;
    background-image:url('http://oi58.tinypic.com/dokkyo.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div7{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:270px;
    left:0px;
    width:100px;
    height:100px;
    background-image:url('http://oi62.tinypic.com/searsk.jpg');
    box-shadow:0px 0px 5px 1px black;
}
#div8{
    margin:5px;
    position:absolute;
    background-size:100%;
    top:270px;
    left:110px;
    width:100px;
    height:100px;
   ...

JavaScript

$(document).ready(function () {
        $('#inner').isotope({
            itemSelector: '.gravity'
        });
        var list = $('#inner');
        list.sortable({
            cursor: 'move',
            start: function (event, ui) {
                ui.item.addClass('grabbing moving').removeClass('gravity');
                ui.placeholder
                  .addClass('starting')
                  .removeClass('moving')
                  .css({
                      top: ui.originalPosition.top
                    , left: ui.originalPosition.left
                  });
                list.isotope('reloadItems');
            },
            change: function (event, ui) {
                ui.placeholder.removeClass('starting');
                list
                  .isotope('reloadItems')
                  .isotope({
                      sortBy: 'original-order',
                      transformsEnabled: false
                  });
            },
            beforeStop: function (event, ui) {
                ui.placeholder.after(ui.item);
            },
            stop: function (event, ui) {
                ui.item.removeClass('grabbing').addClass('gravity');
                list
                  .isotope('reloadItems')
                  .isotope({
                      sortBy: 'original-order',
                      transformsEnabled: false
                  });
            }
        });
        $('#bar').click(function () {
            $("#inner").sortable('disable');
            $("#inner").css({ 'top': '0px', 'left': '0px', 'width': 'initial', 'height': 'initial' });
            runs = "start";
            $('#inner').jGravity({
                target: 'div.gravity', 
                ignoreClass: 'div.steady', 
                weight: 10, 
                depth: 5, 
                drag: true 
            });
            $(this).hide(300);
            $(".steady").animate({
                left:'0px'
            },300);
        });
       ...