JQuery drag plug-in gridster User Guide, jquerygridster

JQuery drag plug-in gridster User Guide, jquerygridster

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.

1. gridster plug-in Function

Implement the drag and drop function similar to win8 Tile

2. gridster official address

Http://gridster.net/

There are also plug-ins and instances on the official website, but according to the official instructions, I have always encountered such problems during local testing. First, they cannot be moved, second, there is a black spot near the magnet, which may be used for positioning. However, such black spots will not appear if they are used normally on the website. The properties and methods of the gridster plug-in are described in detail on the official website.

After testing, the problem was finally solved. The results are as follows:

3. gridster usage

1. First reference the 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 used

<style type="text/css">.handle {  border-bottom: 1px solid black;}.small img{  height:83px;  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. js code used

$(function(){  $(".gridster ul").gridster({    widget_margins: [5, 5],    widget_base_dimensions: [100, 100],    draggable: {      handle: '.handle'    }  });  var gridster = $(".gridster ul").gridster().data('gridster');});

4. 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 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 instructions

The gridster plug-in is normal in chrome and firefox, and the special effect display page is normal. However, in ie8, the display is normal, but the drag-and-drop effect cannot be displayed.

Now you can open it and see the drag effect. Oh, buy a license! You will also find that it is not smooth. This may be a small bug in girdster or an imperfect place. How to improve it will be discussed tomorrow!