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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python面向对象特殊成员
2017/04/24 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
国贸专业求职信
2014/06/28 职场文书
Python利用folium实现地图可视化
2021/05/23 Python