layouts Drag&drop con Jquery

agosto 08, 2012
uriel
publicidad
No Comments

gridster.js, es un plugin jQuery para hacer tus layouts draganddropeables, y que quiere decir esto pues que permite la construcción de diseños intuitivos que pueden arrastrarse a partir de elementos que abarcan varias columnas.

Sencilla de utilizar; se puede incluso agregar y quitar elementos de la grid dinámicamente con apenas cuatro métodos y una docena de atributos bien documentados , ademas cuenta con licencia MIT. Fue Desarrollada y liberada por la gente de Ducksboard en Github.

Como utilizar esta libreria:

Include dependencies

Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.

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

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

view raw gridster.html This Gist brought to you by GitHub.

HTML Structure

Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:

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

view raw gridster.html This Gist brought to you by GitHub.