Gridster. js-drag-and-drop grid plug-in

Gridster. JS is a jquery plug-in used to build an intuitive drag-and-drop layout that supports multiple columns. You can also dynamically add and delete elements in a table.

\

Main features

1. Only dependent on jquery

2. Added and deleted elements

3. Comprehensive documentation

4. With test cases, you can view the test results of your browser

5. Suitable for developing puzzle games

How to Use

Introduce class libraries, including jquery and gridster. JS:

<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript"
Src = "JS/jquery. gridster. Min. js"> </SCRIPT>

Then import the CSS file of gridstrer:

<Link type = "text/CSS"
Href = "CSS/jquery.gridster.min.css">

The HTML content is as follows:

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

Note gridster. JS uses the data attribute of HTML5 to define the relevant drag-and-drop element attributes. Data-row is the row number, data-Col is the column number, and data-sizex is the width of the X axis element, datasizey is the width of the Y axis element.

Finally, call the plug-in JS,CodeAs follows:

 
$ (". Gridster ul"). gridster ({widget_margins: [10, 10], widget_base_dimensions: [140,140]});
 

The size and positioning of each region are set through the created attributes. The properties involved are as follows:
Data-row:The number of rows that exist in the element.
Data-Col:Data column, the number of columns in the element.
Data-sizex:Element block width (in units of units, the width of each element block is the value set by widget_base_dimensions)
Data-sizey:Element block height (in units of items, the height of each element block is the value set by widget_base_dimensions)
Example: widget_base_dimensions:
[150,
150]
The width and height of each element block are 150px/150px respectively.
Note: The width of element block merging is not only the sum of two element blocks.
That is, the width = {data-sizex = "2"} = element block X2 + the margin on the Right = 150*2 + 4 = 304px
Height = {data-sizey = "1"} = element block X1 = 150*1 = 150px

Here we only need to set two values, width, height, and margin.
Widget_margins:
Set the margin between the grids. The passed value is twice the actual pixel, for example, [2, 2] = [4px, 4px] = [right margin, bottom margin].
Widget_base_dimensions:
Set the width and height of the grid. The passed value is the actual pixel, for example, [150,150] = [150px, 150px] = [width, height].

Demo-Document-Download