jquery drag-and-drop plugin Gridster use guide _jquery

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

<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

<style type= "Text/css" > handle {border-bottom:1px solid black; small img{;
width:97px;
  }. gridster {position:relative;
Background-color: #CCC;
  Li {background-color:white;
  width:150px;
  height:300px;
Border:solid 2px Black;
  }. gridster > * {margin:0 auto;
  -webkit-transition:height 4s;
  -moz-transition:height 4s;
  -o-transition:height 4s;
  -ms-transition:height 4s;
Transition:height 4s;
  }. gridster. gs_w{z-index:2;
Position:absolute;
  }. Ready. Gs_w:not (. preview-holder) {-webkit-transition:opacity. 3s, left. 3s, top. 3s;
  -moz-transition:opacity 3s, left. 3s, top. 3s;
  -o-transition:opacity 3s, left. 3s, top. 3s;
Transition:opacity 3s, left. 3s, top. 3s;
  Ready. Gs_w:not (. preview-holder) {-webkit-transition:opacity. 3s, left. 3s, top. 3s, width. 3s, height. 3s;
  -moz-transition:opacity 3s, left. 3s, top. 3s, width. 3s, height. 3s; -o-transition:opacity 3s, left. 3s, top. 3s, WIDTH 3s, height. 3s;
Transition:opacity 3s, left. 3s, top. 3s, width. 3s, height. 3s;
  }. Gridster. preview-holder {z-index:1;
  Position:absolute;
  Background-color: #fff;
  Border-color: #fff;
opacity:0.3;
  }. Gridster. player-revert {z-index:10!important;
  -webkit-transition:left 3s, top 3s!important;
  -moz-transition:left 3s, top 3s!important;
  -o-transition:left 3s, top 3s!important;
Transition:left 3s, top 3s!important;
  }. Gridster. dragging {z-index:10!important;
  -webkit-transition:all 0s!important;
  -moz-transition:all 0s!important;
  -o-transition:all 0s!important;
transition:all 0s!important;

 } p{margin:10px;}

3. Use of JS code

$ (function () {

  $ (". Gridster ul"). Gridster ({
    widget_margins: [5, 5],
    widget_base_dimensions: [100, 100],
    draggable: {
      handle: '. Handle '
    }
  });
  var Gridster = $ (". Gridster ul"). Gridster (). Data (' Gridster ');
});

4. Use of HTML

<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 "></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 "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! Also will you discover very not fluent, this perhaps is girdster the small bug or says the imperfect place, how improves, tomorrow speaks again!