jQuery拖拽插件gridster使用指南

gridster.js是一个jQuery插件用来构建直观的可拖放的布局，支持多列布局，你还可以动态的添加和删除表格中的元素。

1.gridster插件功能

实现类似于win8磁贴拖拽的功能

2.gridster官方地址

http://gridster.net/

在官方的网站上也有插件的帮助和实例，但是按照官方的说明，我在本地测试总是出现这样那样的问题，一是无法移动，二是在磁铁的附近有一个黑点，可能是定位使用的。但是如果在网站中正常使用，应该不会出现这样的黑点格里斯特。插件的属性和方法在官网上有详细说明。

经过测试了一下，最后终于解决了问题。效果显示如下：

3.gridster使用方法

1.首先引用射流研究…文件

脚本类型=' text/JAVAScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。格斯特。js '/脚本链接rel='样式表type=' text/CSS ' href=' style。CSS '/2 .用到的钢性铸铁

样式类型='text/css ' .手柄{边框-底部： 1px纯黑；}.小型img { height:83px宽度：97 px}.grid ster {位置：相对；背景-颜色： # CCC} li {背景-颜色：白色；宽度： 150像素；高度： 300pxborder:固体2px黑色；}.gridster * { margin: 0自动网套件-transit :高度。4s；-moz-transit :高度。4s；-o-transit :高度。4s；-ms-transit :高度。4s；过渡：高度。4s；}.格里斯特GS _ w { z-index : 2；绝对位置：}.准备好了gs_w:not(.预览-支架){-网络套件-transit :不透明度。3s，左。3s，上。3s；-moz-transit :不透明度。3s，左。3s，上。3s；-o-transit :不透明度。3s，左侧。3s，顶部。3s；过渡：不透明度。3s，左。3s，上。3s；}.准备好了gs_w:not(.预览-支架){-网络套件-transit :不透明度。3s，左。3s，顶。3s，宽。3s，高。3s；-moz-transit :不透明度。3s，左侧。3s，顶部。3s，宽度。3s，高度。3s；-o-transit :不透明度。3s，左侧。3s，顶部。3s，宽度。3s，高度。3s；过渡：不透明度。3s，左侧。3s，顶部。3s，宽度。3s，高度。3s；}.格里斯特。预览架{ z-index : 1；绝对位置：背景-color : # fff；边框颜色： # fffopacity: 0.3 }。格里斯特。玩家还原{ z-index: 10！重要；-WebKit-transit :左。3s，上。3s！重要；-moz-transit :左0.3,上0.3!重要；-o-transit :左0.3,上0.3!重要；向左：度，上0.3度！重要；}.格里斯特。正在拖动{ z-index: 10！重要；-WebKit-transit :全0!重要；-moz-transit :全0!重要；-o-transit :全0!重要；过渡：全0!重要；} p { margin:10px } 3。使用的射流研究…代码

$(function(){ $(').电网公司.grid ster({ widget _ margins :[5，5]，widget _ base _ dimensions :[100，100]，可拖动： { handle : }).句柄' } });var gridster=$(' .电网公司.gridster().数据(“grid ster”)；});4.使用的超文本标记语言

div class=' grid ster ' ul id=' resable ' Li数据-行=' 1 ' data-col=' 1 ' data-sizex=' 1 ' data-sizey=' 1 ' div class=' handle ' 1/div class=' small ' img src=' http : test。jpg '/div/李数据-行=' 2 ' data-col=' 1 ' data-sizex=' 1 ' data-sizey=' 1 ' div class=' handle ' 2/div/Li数据覆盖几乎所有欧芹默认行为，以满足您的确切需求/p/li li数据-行=' 1 ' data-col=' 4 ' data-sizex=' 1 ' data-sizey=' 1 ' div class=' handle ' 6/div/Li数据-行=' 2 ' data-col=' 4 ' data-sizex=' 2 ' data-sizey=' 1 ' div class=' handle ' 7/div/Li数据-行=' 3 ' data-col=' 4 ' data-sizex=' 1 ' data-sizey=' 1 ' div class=' handle ' 8使用说明

gridster插件在铬与火狐浏览器中使用正常，特效显示页正常。但是在ie8一下显示正常，但是拖拽特效无法显示。

现在你可以打开来看看这个拖动效果了哦，是的，买尬的！也会你会发现很不流畅，这个或许是腰带匠的小病菌或者说不完美的地方，如何改进，明天再讲！