jQuery плагин для создания таблиц из элементов с возможностью их перемещения мышью.

Gridster - это jQuery плагин для создания таблиц из элементов с возможностью их перемещения мышью.

Названия классов и теги можно использовать любые, для работы Gridster-а важно указать необходимые data-аттрибуты:

HTML

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Для того что бы все заработало надо подключить jQuery и скрип Gridster:

<!-- библиотека jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- плагин Gridster -->
<script src="js/jquery.gridster.min.js"></script>

Вызываем Gridster с параметрами:

 var gridster = null;
        $(document).ready(function () {
            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: ['auto', 140],
                autogenerate_stylesheet: true,
                min_cols: 1,
                max_cols: 6,
                widget_margins: [5, 5],
                resize: {
                    enabled: true
                }
            }).data('gridster');
            $('.gridster  ul').css({'padding': '0'});
        });

ДЕМО

Скачать плагин и ознакомится с документацией можно на странице проекта dsmorse.github.io/gridster.js/

Gridster поддерживается браузерами Internet Explorer 9+, Firefox, Chrome, Safari and Opera.