看过bootstrap可视化布局系统的人是不是都会对页面元素的拖拽有着很大的兴趣？下面呢，楼主就给大家讲两个楼主知道的拖拽小插件吧。
一、gridster
　　1.了解gridster
　　　　后续官网：http://dsmorse.github.io/gridster.js/
　　　　gridster.js后续的更新：https://github.com/dsmorse/gridster.js
　　　　issues: https://github.com/ducksboard/gridster.js/issues
　　2.官网示例
　　　　①动态添加模块(http://dsmorse.github.io/gridster.js/demos/adding-widgets-dynamically.html)：使用add_widget方法，通过数组创建gridster实例。产生的模块自动排列，无需指定相对位置。
　　　　②自定义拖拽内容(http://dsmorse.github.io/gridster.js/demos/custom-drag-handle.html)：使用handle定义拖动元素。
　　　　③放大悬停(http://dsmorse.github.io/gridster.js/demos/expandable-widgets.html)：使用resize_widget方法悬停时展开模块。
　　　　④示例序列化(http://dsmorse.github.io/gridster.js/demos/grid-from-serialize.html)：通过JSON序列生成一个gridster实例[有了这个方法我们就可以方便的从数据库读取用户的模块位置定义]。
　　　　⑤同一页面多个Gridster实例(http://dsmorse.github.io/gridster.js/demos/multiple-grids.html)：通过配置参数namespace在同一个页面配置多个gridster实例。
　　　　⑥改变模块大小(http://dsmorse.github.io/gridster.js/demos/resize.html)：通过拖动改变模块的大小。
　　　　⑦改变模块大小时添加的限制(http://dsmorse.github.io/gridster.js/demos/resize-limits.html)：使用resize.max_size和resize.min_size配置选项或者data-max-sizex，data-max-sizey， data-min-sizex和data-min-sizeyHTML属性调整大小时限制部件的尺寸。如果通过配置选项指定全局max_size，则可以在具有HTML数据属性或使用set_widget_max_size 方法的指定模块中重写
　　　　⑧序列化模块位置(http://dsmorse.github.io/gridster.js/demos/serialize.html)：使用serialize方法来获取模块的位置。返回一个可以JSON对象的对象数组。
　　　　⑨拖动的回调函数(http://dsmorse.github.io/gridster.js/demos/using-drag-callbacks.html)：拖动模块执行回调函数。
　　　　⑩改变模块大小后的回调函数(http://dsmorse.github.io/gridster.js/demos/using-resize-callbacks.html)：可调动模块大小并执行回调函数。
　　　　⑪动态网格宽度(http://dsmorse.github.io/gridster.js/demos/dynamic-grid-width.html):使用max_cols选项设置网格最大列
　　　　⑫响应式网格宽度(http://dsmorse.github.io/gridster.js/demos/responsive.html)：随屏幕大小变化而变化。
　　　　⑬具有较大模块的网格与模块交换点(http://dsmorse.github.io/gridster.js/demos/SwapDrop.html)：shift_larger_widgets_down设置为"false"。
　　　　⑭允许模块精确放置在任何位置的网格(http://dsmorse.github.io/gridster.js/demos/sticky-postion.html)
　　3.Demo
　　　　❶需要引入的文件
　　　　　　jquery.js(jQuery文件，gridster官方不提供下载，不多说了-> http://www.jquery.com )
　　　　　　jquery.gridster.js(gridster的主要脚本)
　　　　　　jquery.gridster.css(gridster的样式文件)
　　　　❷示例

  1.  <!Doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>gridster实例</title>
  6.  <!-- 调用jquery，注意目录位置！ -->
  7.  <script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>
  8.  <!-- 调用gridster.js和css，注意放置的目录不要搞错了哦！ -->
  9.  <script src="./js/jquery.gridster.js" type="text/javascript"
  10.      charset="utf-8"></script>
  11.  <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
  12.  <script>
  13.      //通过javascript脚本来配置拖动实例，随后我们会讲每个配置参数的意义
  14.      //首先定义一个变量gridster，为了以后调用gridster的方法
  15.      var gridster;
  16.      $(function() {
  17.          gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
  18.              widget_base_dimensions : [ 100, 120 ], //模块的宽高 [宽,高]
  19.              widget_margins : [ 5, 5 ], //模块的间距 [上下,左右]
  20.              draggable : {
  21.                  handle : 'header' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
  22.              }
  23.          }).data('gridster');
  24.      });
  25.  </script>
  26.  <!-- 当然，除了调用gridster.js和css，你也可以为你的html写一些自己的style -->
  27.  <style>
  28.  .gridster ul {
  29.      margin: 0;
  30.  }
  31.  
  32.  .gridster ul li {
  33.      list-style-type: none;
  34.      border: 1px solid #e0e0e0;
  35.  }
  36.  
  37.  .gridster ul li header {
  38.      background: none repeat scroll 0% 0% #999;
  39.      display: block;
  40.      font-size: 20px;
  41.      line-height: normal;
  42.      padding: 4px 0px 6px;
  43.      margin-bottom: 20px;
  44.      cursor: move;
  45.      text-align: center;
  46.  }
  47.  </style>
  48.  </head>
  49.  <body>
  50.      <div class="gridster">
  51.          <ul>
  52.              <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><header>请点击这里进行拖拽</header>
  53.                  0</li><!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
  54.              <li data-row="1" data-col="3" data-sizex="1" data-sizey="2"><header>请点击这里进行拖拽</header>
  55.                  1</li>
  56.              <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
  57.                  2</li>
  58.              <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"><header>请点击这里进行拖拽</header>
  59.                  3</li>
  60.              <li data-row="4" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
  61.                  4</li>
  62.              <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
  63.                  5</li>
  64.              <li data-row="4" data-col="2" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
  65.                  6</li>
  66.          </ul>
  67.      </div>
  68.  </body>
  69.  </html>

　　4.参数及方法介绍
　　Options
　　　　widget_selector　　
　　　　　　示例：widget_selector: "li"
　　　　　　说明：定义可拖动模块的元素名称，支持css选择器

　　　　widget_margins
　　　　　　示例：widget_margins: [10, 10]
　　　　　　说明：模块的边距，第一个参数是上下边距，第二个参数是左右边距。

　　　　widget_base_dimensions
　　　　　　示例：widget_base_dimensions: [140, 140]
　　　　　　说明：模块的大小，第一个参数是宽度，第二个参数是高度。以像素为单位

　　　　extra_rows
　　　　　　示例：extra_rows: 0/extra_cols: 0
　　　　　　说明：添加行

　　　　extra_cols
　　　　　　示例：extra_cols: 0
　　　　　　说明：添加列

　　　　max_cols
　　　　　　示例：max_cols: null
　　　　　　说明：设置最大列数。max_cols: null为禁用

　　　　min_cols
　　　　　　示例：min_cols: 1
　　　　　　说明：设置最小列数

　　　　min_rows
　　　　　　示例：min_rows: 15
　　　　　　说明：设置最小行数

　　　　max_size_x
　　　　　　示例：max_size_x: false
　　　　　　说明：模块所占最大列数

　　　　autogenerate_stylesheet
　　　　　　示例：autogenerate_stylesheet: true
　　　　　　说明：默认为true，自动将模块的css样式插入到<head>标签中。设置为false时，手动的定义这些模块的位置。就像这样：[data-col="1"] { left: 10px; }

　　　　avoid_overlapped_widgets
　　　　　　示例：avoid_overlapped_widgets: true
　　　　　　说明：设置为true，不允许模块叠加，如果两个模块的位置一样（data-col和data-row来决定），程序会自动调整他们的位置，这样可以防止模块错乱

　　　　serialize_params
　　　　　　示例：serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y } }
　　　　　　说明：自定义序列化的格式，这个函数的返回值将作为返回数组的一个元素，每个模块生成一个元素。使用serialize()方法时才用到此配置。$w的意思是JQuery的HTML元素，wgd的意思是widget data，gridster通过wgd可以直接取得诸如data-col等的配置，但是如果你想去的模块元素的id，，我们可以通过$w.attr("id")获取。

　　　　draggable.start
　　　　　　示例：draggable:{start: function(event, ui){}}
　　　　　　说明：拖动开始执行的函数

　　　　draggable.drag
　　　　　　示例：draggable:{drag: function(event, ui){}}
　　　　　　说明：拖动过程中鼠标移动时执行的函数

　　　　draggable.stop
　　　　　　示例：draggable:{stop: function(event, ui){}}
　　　　　　说明：拖动结束后执行的函数

　　　　resize.enabled
　　　　　　示例：resize:{enabled: false}
　　　　　　说明：默认false，设置为true时表示可以拖动模块的右下角改变模块大小

　　　　resize.axes
　　　　　　示例：resize:{axes: ['both']}
　　　　　　说明：设置改变模块大小时，鼠标可以向X轴还是Y轴移动，意思就是说你可以设置改变模块大小的宽度还是高度，设置为x只能改变模块宽度，设置为y只能改变高度，设置为both高和宽都可以改变。

　　　　resize.handle_class
　　　　　　示例：resize:{handle_class: 'gs-resize-handle'}
　　　　　　说明：设置改变模块大小时，拖动按钮的css类名称，默认是gs-resize-handle

　　　　resize.handle_append_to
　　　　　　示例：resize:{handle_append_to: ''}
　　　　　　说明：通过css选择器设置一个元素，这个元素将是拖动按钮的父元素，如果不设置，默认是这个模块（也就是widget_selector的值）

　　　　resize.max_size
　　　　　　示例：resize:{max_size: [Infinity, Infinity]}
　　　　　　说明：在改变模块大小的时候，为模块的最大宽高做限制

　　　　resize.start
　　　　　　示例：resize:{start: function(e, ui, $widget) {}}
　　　　　　说明：鼠标开始拖动大小的时候执行的函数

　　　　resize.resize
　　　　　　示例：resize:{resize: function(e, ui, $widget) {}}
　　　　　　说明：大小一旦改变执行的函数

　　　　resize.stop
　　　　　　示例：resize:{stop: function(e, ui, $widget) {}}
　　　　　　说明：鼠标停止调动大小时执行的函数

　　　　collision.on_overlap_start
　　　　　　示例：collision:{on_overlap_start: function(collider_data) { }}
　　　　　　说明：模块首次进入新网格单元时的回调。

　　　　collision.on_overlap
　　　　　　示例：collision:{on_overlap: function(collider_data) { }}
　　　　　　说明：模块在网格单元内移动时的回调。

　　　　collision.on_overlap_stop
　　　　　　示例：collision:{on_overlap_stop: function(collider_data) { }}
　　　　　　说明：模块首次离开旧网格单元时的回调。

　　Methods
　　　　.add_widget( html, [size_x], [size_y], [col], [row] )
　　　　参数：
　　　　　　html String | HTMLElement
　　　　　　　　表示模块的节点或字符串将被添加。
　　　　　　size_x 数字
　　　　　　　　模块占用的行数。默认为1。
　　　　　　size_y 数字
　　　　　　　　模块占用的列数。默认为1。
　　　　　　col 数字
　　　　　　　　模块应该启动的列。
　　　　　　row 数字
　　　　　　　　模块应该开始的行。
　　　　说明：用给定的html创建一个新的模块并将其添加到网格中。返回表示已调整大小的模块的节点。

　　　　.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
　　　　参数：
　　　　　　$ widget HTMLElement
　　　　　　　　模块将被调整大小。
　　　　　　size_x 数字
　　　　　　　　模块将要跨越的行数。默认为当前size_x。
　　　　　　size_y 数字
　　　　　　　　模块要跨越的列数。默认为当前size_y。
　　　　　　reposition 布尔值
　　　　　　　　如果右侧没有足够的空间，则设置为false以不移动窗口模块到左侧。默认情况下size_x，仅限于模块开始处的列可用空间，直到最后一列位于右侧。
　　　　说明：更改模块的大小。宽度限制为当前网格宽度。返回表示已调整大小的模块节点。

　　　　.remove_widget( el, [callback] )
　　　　参数：
　　　　　　EL HTMLElement
　　　　　　　　你想要移除的模块节点。
　　　　　　回调函数
　　　　　　　　模块被移除时的回调。
　　　　说明：从网格中移除一个模块。返回Gridster类的实例。

　　　　.serialize( [$widgets] )
　　　　参数：
　　　　　　$ widgets HTMLElement
　　　　　　　　序列化的节点。如果没有参数传递，所有的模块都会被序列化。
　　　　说明：创建一个对象数组，表示网格中所有模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。

　　　　.serialize_changed( )
　　　　说明：创建一个对象数组，表示已更改位置的模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。

　　　　.enable( )
　　　　说明：启用拖动。返回Gridster类的实例。

　　　　.disable( )
　　　　说明：禁用拖动。返回Gridster类的实例。

可拖动布局之Gridster的更多相关文章

  1. jQuery实现拖动布局并将排序结果保存到数据库

    很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的.当用户清空客户端的cookie或浏览器的cookie过 ...

  2. 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  3. jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  4. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  5. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  6. duilib拖动控制功能的实现（源代码）

    转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件添加拖拽的功能.而实 ...

  7. HTML布局排版1清除body的margin

    观察可发现,一般的HTML页面分为上中下三部分,上边是导航一栏,中间是内容,下方是页面的下部分.注意html里body本身自带8px的上下左右外边距,如图,在qq浏览器和ie里可以看到body本身是8 ...

  8. Qt编写数据可视化大屏界面电子看板5-恢复布局

    一.前言 恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表 ...

  9. PyQt5布局管理器

    布局分类 绝对定位:使用move方法将空间直接定死在某个坐标,不会随着窗口大小的改变而改变 可变布局:使用各种布局管理器,实现组件的位置和大小随着窗口的变化而变化 布局管理器 QHBoxLayout: ...

随机推荐

  1. Linux文件

    Linux文件类型 对于内核而言,所有打开的文件都是通过文件描述符引用(FD),文件描述符是一个非负整数,当打开现有问价或创建一个新文件时,内核向进程返回一个文件描述符. 按照惯例,shell把文件描 ...

  2. jquery 遍历表格，需要表格中每个td的内容

    $("table tr:gt(0)").each(function(i){ alert("这是第"+i+"行内容"); $(this).ch ...

  3. diffMerge安装配置使用

    概述: 在用git进行源代码版本维护的时候,常常会进行各代码版本之前区别的查看,例如在每次提交改动前进行git diff 可以看到源文件代码相对相应版本或是远程仓库的改动情况,如果有冲突还需要进行me ...

  4. CSS3 三角形运用

      酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...

  5. 流API--使用并行流

    这篇博客一起来研究下使用并行流.借组多核处理器并行执行代码可以显著提高性能,但是并行编程可能十分复杂且容易出错,流API提供的好处之一是能够轻松可靠的并行执行一些操作.请求并行处理流,首先要获得一个并 ...

  6. Servlet--传参和接参

    OK,现在基本的Servlet接口和常用类都整理的差不多的,本篇博客开始整理Servlet和页面的交互. 1,接参 以下几个常用的方法: getParameter public String getP ...

  7. libev学习笔记

    转 libev的使用--结合Socket编程 作者:cxy450019566 之前自己学过一些libev编程的基础,这次写压测刚好用上了,才算真正动手写了些东西,在这里做一些总结.写这篇文章是为了用浅 ...

  8. android 监听返回键

    android监听返回键 public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE ...

  9. tomcat监控(二)

    标签: linux 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 这里介绍二种监控Tomcat的方法 使用windows版本的jdk监控 使用zabbix监控 ...

  10. python交互模式下tab键自动补全

    import rlcompleter,readline readline.parse_and_bind('tab:complete')