Sortable Grid - Dashboard

Sample dashboard using jquery sortable and css3 animation

by Indrajeet Zala

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

    <div style="margin: 5px auto !important; padding: 5px;">
       Select minimum width X height </strong>&nbsp;
        <select id="layoutStyle">
            <option value="200X200">200 X 200</option>
            <option value="250X250">250 X 250</option>
            <option value="300X300">300 X 300</option>
            <option value="300X350">300 X 350</option>
            <option value="400X300">400 X 300</option>
            <option value="400X400">400 X 400</option>
            <option value="500X400">500 X 400</option>
            <option value="500X500">500 X 500</option>
            <option value="600X500">600 X 500</option>
        </select>&nbsp;<strong> & try resizing the browser!</strong>
    </div>
    <div class="container">
        <ul class="items">
            <li>
                <div>Graph1</div>
            </li>
            <li>
                <div>Graph2</div>
            </li>
            <li>
                <div>Graph3</div>
            </li>
            <li>
                <div>Graph4</div>
            </li>
            <li>
                <div>Graph5</div>
            </li>
            <li>
                <div>Graph6</div>
            </li>
            <li>
                <div>Graph7</div>
            </li>
            <li>
                <div>Graph8</div>
            </li>
            <li>
                <div>Graph9</div>
            </li>
            <li>
                <div>Graph10</div>
            </li>
        </ul>
    </div>

CSS

body {
    font-family: Arial;
    background-color: #222;
    font-size: 12px;
    color: white;
}

a {
    color: #fff;
}

.container {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}

.items {
    list-style-type: none;
    position: absolute;
    height: inherit;
    width: inherit;
    color: #222;
    text-align: center;
}

    .items li {
        border: 1px solid silver;
        background: #fff;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

        .items li.dragging:nth-child(n) {
            -webkit-transform: none;
            -webkit-transition: none;
            transform: none;
            transition: none;
            box-shadow: 0 0 8px black;
            background-color: white;
            border: none;
        }

JavaScript

//Reference & Credits for animating grid with CSS3 transitions : http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/
//rest of it: https://twitter.com/jeetaz
var initialHeight;
var initialWidth;
var nCols = 0;
var nRows = 0;
var nWidgetCounts = 10;

$(function () {

    initialHeight = $(".container").height();
    initialWidth = $(".container").width();

    $(".items").sortable({
        containment: "parent",
        //scrollSensitivity: 100,
        //placeholder: 'placeholder',
        start: function (event, ui) {
            // Temporarily move the dragged item to the end of the list so that it doesn't offset the items
            // below it (jQuery UI adds a 'placeholder' element which creates the desired offset during dragging)
            $(ui.item).appendTo(this).addClass("dragging");
        },
        stop: function (event, ui) {
            // jQuery UI instantly moves the element to its final position, but we want it to transition there.
            // So, first convert the final top/left position into a translate3d style override
            var newTranslation = "translate3d(" + ui.position.left + "px, " + ui.position.top + "px, 0)";
            $(ui.item).css("-webkit-transform", newTranslation)
                        .css("transform", newTranslation);
            // ... then remove that override within a snapshot so that it transitions.
            $(ui.item).snapshotStyles().removeClass("dragging").releaseSnapshot();
        }
    });

    // Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
    $(".items").on("webkitTransitionEnd", function () {
        $(this).hide().offset();
        $(this).show();
    });

    function createListStyles(rulePattern, rows, cols, width, height) {
        $('#headstyle').remove();
        var rules = [], index = 0;
        for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
            for (var colIndex = 0;...