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 相关文章推荐
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
js实现简易聊天对话框
Aug 17 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
layer实现弹出层自动调节位置
Sep 05 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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实现简单的语法高亮函数实例分析
2015/04/27 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python 处理string到hex脚本的方法
2018/10/26 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
详解Python 函数参数的拆解
2020/09/02 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
英语感恩演讲稿
2014/01/14 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
课外访万家心得体会
2014/09/03 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Python保存并浏览用户的历史记录
2022/04/29 Python