gridster.js– drag-and-drop grid plugin

Gridster.js is a jQuery plugin for building intuitive, drag-and-drop layouts that support multi-column layouts, and you can dynamically add and remove elements from a table.

\

Key Features

1. Rely on jquery only

2. Support element additions and deletions

3. Document comparison full

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

5. More 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 gridstrer CSS file:

<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-r ow= "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 HTML5 data property to define the associated drag-and-drop element properties, Data-row as the line number, Data-col as the column number, Data-sizex as the x-axis element width, and Datasizey as the y-axis element width.

Finally call the plugin JS, the code is as follows:

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

This is done by creating a property that sets the size and location of each area, with the following attributes:
Data-row: The number of rows that the element exists for the data row.
data-col: data column, the number of columns that the element exists in.
Data-sizex: The width of the element block (in units, each element block has a value of widget_base_dimensions)
Data-sizey: The height of the element block (in units, each element block has a value set to Widget_base_dimensions)
Example: widget_base_dimensions: [150, 150]
Then the width/height of each element block is 150px/150px
Note: The width of the element block merging is not just the sum of two element blocks
That is, width ={data-sizex= "2″}= element block x2+ right margin ==150*2+4=304px
Height ={data-sizey= "1″}= element block x1==150*1=150px

Here we only need to set two values, width height/margin;
Widget_margins:
Sets the margin between grids, which is twice times the number of actual pixels, such as [2,2]==[4px,4px]=[right margin, bottom margin].
Widget_base_dimensions:
Sets the width and height of the grid, and the value passed = actual pixels, such as [150,150]==[150px,150px]=[width,height].

gridster.js– drag-and-drop grid plugin