Gridster: Drag&Drop Multi-Column Grid

Gridster был протестирован в Internet Explorer 9 +, Firefox, Chrome, Safari и Opera. Он распространяется под лицензией MIT.

Использование:

Для работы Gridster-a требуется библиотека jQuery, поэтому не забудьте подключить её перед скриптом.

<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="jquery.gridster.js"></script>

HTML-структура

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

<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>

Gridster принимает один аргумент, хэш с параметрами конфигурации. См. документацию.

$(function(){ //DOM Ready
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
});

• Лицензия: MIT License
• Требования: jQuery Framework