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 相关文章推荐
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
对盗链说再见...
2006/10/09 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
vue+canvas实现移动端手写签名
2020/05/21 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
python递归实现快速排序
2018/08/18 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python绘制动态曲线教程
2020/02/24 Python
Python如何输出整数
2020/06/07 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
成人教育自我鉴定
2013/11/01 职场文书
医学生职业规划范文
2014/01/05 职场文书
婚前协议书
2014/04/15 职场文书
协议书样本
2014/04/23 职场文书
电钳工人个人求职信
2014/05/10 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
springboot用户数据修改的详细实现
2022/04/06 Java/Android