Sortable piramid

by ostapische

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<button onclick="createPiramid(200, 3);">Create piramid</button>

JavaScript

function createPiramid(width, rowsCols) {
    var widthLi = Math.ceil((100 / rowsCols) * 100) / 100;
    var ul = $('<ul></ul>');
    ul.css('list-style', 'none outside none');
    ul.css('overflow', 'hidden');
    ul.css('width', width + 'px');
    var li;
    for (var i = 0; i < rowsCols; i++) {
        for (var j = 0; j < rowsCols; j++) {
            li = $('<li></li>');
            li.html(i + ' ' + j);
            li.css('float', 'left');
            li.css('display', 'inline');
            li.css('width', widthLi + '%');
            ul.append(li);
        }
    }
    ul.sortable();
    $('body').append(ul);
}