jquery drag-and-Drop plugin Gridster usage guide

Gridster.js is a jquery based on the front-end drag-and-drop plug-ins, the effect is quite good, we can first look at the demo (http://gridster.net/#intro) (blue part of the white piece is, you can drag, entertainment is very strong).

Gridster.js is a jQuery plug-in used to build intuitive, drag-and-drop layouts that support multiple-column layouts, and you can dynamically add and remove elements from a table.

1.gridster plug-in function

Implements a function similar to the WIN8 magnetic paste drag and drop

2.gridster official Address

http://gridster.net/

The official web site also has plug-ins help and examples, but according to the official instructions, I always in the local test there is such a problem, one is unable to move, the second is in the vicinity of the magnet has a black spot, may be used for positioning. However, if the normal use of the site, should not appear such black spots. The properties and methods of the Gridster Plug-ins are described in detail on the official website.

After a test, finally solved the problem. The effect appears as follows:

3.gridster Use method

1. First reference JS file

?

1 2 3

<script type= "Text/javascript" src= "jquery-1.7.2.min.js" ></script> <script type= "Text/javascript" Src= "Jquery.gridster.js" ></script> <link rel= "stylesheet" type= "Text/css" href= "Style.css"/>

2. CSS to use

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15-16 17 18 19 20 21 22 23 24 25 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 The "border:0;padding:0" and "<style type=" Text/css > handle {border-bottom:1

3. Use of JS code

?

1 2 3 4 5 6 7 8 9 10 11

$ (function () {$ (". Gridster ul"). Gridster ({widget_margins: [5, 5], widget_base_dimensions: [MB], draggable: {hand Le: '. Handle '}}); var Gridster = $ (". Gridster ul"). Gridster (). Data (' Gridster '); });

4. Use of HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20

<div class= "Gridster" > <ul id= "reszable" > <li data-row= "1" data-col= "1" data-sizex= "1" data-sizey= "1" ><div class= "Handle" >1</div><div class= "small" ><img src= "Test.jpg"/></div></ Li> <li data-row= "2" data-col= "1" data-sizex= "1" data-sizey= "1" ><div class= "handle" >2</div>< /li> <li data-row= "3" data-col= "1" data-sizex= "1" data-sizey= "1" ><div class= "handle" >3</div> </li> <li data-row= "1" data-col= "2" data-sizex= "2" data-sizey= "1" ><div class= "handle" >4</div ></li> <li data-row= "2" data-col= "2" data-sizex= "2" data-sizey= "2" ><div class= "handle" >5</ Div><p> like no other JavaScript library, Parsley has a full support for #UX concerns and detailed options. Override almost every parsley default behaviors to fit your exact needs.</p></li> <li data-row= "1" data-col = "4" data-sizex= "1" data-sizey= "1" ><div class= "handle" >6</DIV></li> <li data-row= "2" data-col= "4" data-sizex= "2" data-sizey= "1" ><div class= "handle" >7</div ></li> <li data-row= "3" data-col= "4" data-sizex= "1" data-sizey= "1" ><div class= "handle" >8</ Div></li> <li data-row= "1" data-col= "5" data-sizex= "1" data-sizey= "1" ><div class= "handle" >9< /div></li> <li data-row= "3" data-col= "5" data-sizex= "1" data-sizey= "1" ><div class= "handle" >10 </div></li> <li data-row= "1" data-col= "6" data-sizex= "1" data-sizey= "1" ><div class= "Handle" > 11</div></li> <li data-row= "2" data-col= "6" data-sizex= "1" data-sizey= "2" ><div class= "handle" >12</div></li> <li data-row= "1" data-col= "7" data-sizex= "1" data-sizey= "1" ><div class= " Handle ">13</div></li> <li data-row=" 2 "data-col=" 7 "data-sizex=" 1 "data-sizey=" 1 "><div class = "Handle" >14</div></li> <li data-row= "3" data-col= "7" data-sizex= "1 "data-sizey=" 1 "><div class=" handle ">15</div></li> </ul> </div>

4.gridster usage Instructions

The Gridster plugin is used normally in Chrome and Firefox, and the special Effects display page is normal. But the IE8 display is normal, but the drag effect cannot be displayed.

Now you can open it to see the drag effect, Oh, buy a race! You will find that it is not fluent, this may be a small bug or girdster, how to improve, to speak tomorrow!