JealousGirl

看过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类的实例。

分类:

技术点:

相关文章: