jQuery拖拽插件gridster使用指南


Posted in Javascript onApril 21, 2015

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

1.gridster插件功能

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

2.gridster官方地址

http://gridster.net/

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

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

jQuery拖拽插件gridster使用指南

3.gridster使用方法

1.首先引用js文件

<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

<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代码

$(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"><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使用说明

gridster插件在chrome与firefox中使用正常,特效显示页正常。但是在ie8一下显示正常,但是拖拽特效无法显示。

现在你可以打开来看看这个拖动效果了,Oh,买尬的!也会你会发现很不流畅,这个或许是girdster的小bug或者说不完美的地方,如何改进,明天再讲!

Javascript 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
javascript实现校验文件上传控件实例
Apr 20 #Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 #Javascript
You might like
如何用PHP实现插入排序?
2013/04/10 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php实现递归的三种基本方式
2020/07/04 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python的常见命令注入威胁
2013/02/18 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
python怎么对数字进行过滤
2020/07/05 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
ktv中秋节活动方案
2014/01/30 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
绿色环保标语
2014/06/12 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL