Jquery IU ——Draggable

最近在看 Jquery IU 在学习过程中顺便记录了一点，一起和大家分享

• 例子
• 参数说明【没有全部列举太多了】
• 事件说明
• 方法说明

首先接触到的是Draggable 插件可以使被选择的元素随着鼠标移动实现拖动

---

1、首先是默认情况下拖动

Drag me around

点我查看详细html代码

<div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </div>

点我查看详细jquery代码

很简单就一句，别忘记导入jquery UI和jquery包 $(function(){ $("#draggable").draggable();//默认情况拖动 }); })

 

---

2、X，Y方向以及容器内拖动

我只能在水平方向移动

我只能在垂直方向移动

我只能在容器里拖动

点我查看详细html代码

<div id="draggable_x" class="draggable ui-widget-content"> <p>我只能在水平方向移动</p> </div> <div id="draggable_y" class="draggable ui-widget-content"> <p>我只能在垂直方向移动</p> </div> <div id="containment-wrapper"> <div id="draggable3" class="draggable ui-widget-content"> <p>我只能在容器里拖动</p> </div> </div>

点我查看详细jquery代码

 

---

3、拖动或恢复到原位置

拖动我恢复到原位置

对比下我们的效果

 

 

 

 

点我查看详细html代码

点我查看详细jquery代码

---

4、鼠标放到指定区域拖动

点我可以拖

拖不了

点我可以拖

拖
不了

 

 

 

 

点我查看详细html代码

点我查看详细jquery代码

---

draggable常用的几种效果就这样, 呵呵~~是不是很简单^-^

---

参数说明

• axis

  类型:

  String

  默认值:

  false

  设置拖动是水平方向还是垂直方向,也可以是水平与垂直方向. 允许使用的值: 'x', 'y'.

  代码示例

  使用指定的axis参数初始化一个draggable.

  $('.selector').draggable({ axis: 'x' });

  在初始化后设置或者获取axis参数.

  //获取  var axis = $('.selector').draggable('option', 'axis');  //设置  $('.selector').draggable('option', 'axis', 'x');

  ---

• cancel

  类型:

  Selector

  默认值:

  ':input,option'

  禁止在指定的元素上进行拖动

  代码示例

  使用指定的cancel参数初始化一个draggable.

  $('.selector').draggable({ cancel: 'button' });

  在初始化后设置或者获取cancel参数.

  //获取  var cancel = $('.selector').draggable('option', 'cancel');  //设置  $('.selector').draggable('option', 'cancel', 'button');

---

cursor

类型:

String

默认值:

'auto'

设置拖动时的鼠标指针样式.

代码示例

使用指定的cursor参数初始化一个draggable.

$('.selector').draggable({ cursor: 'crosshair' });

在初始化后设置或者获取cursor参数.

//获取  var cursor = $('.selector').draggable('option', 'cursor');  //设置  $('.selector').draggable('option', 'cursor', 'crosshair');

---

• grid

  类型:

  Array

  默认值:

  false

  设置辅助在目标容器中的x和y边距(单位:像素). 数组值: [x, y]

  代码示例

  使用指定的grid参数初始化一个draggable.

  $('.selector').draggable({ grid: [50, 20] });

  在初始化后设置或者获取grid参数.

  //获取  var grid = $('.selector').draggable('option', 'grid');  //设置  $('.selector').draggable('option', 'grid', [50, 20]);

  ---

• handle

  类型:

  Element, Selector

  默认值:

  false

  如果设定了此参数,那么拖动会在指定的元素上开始.

  代码示例

  使用指定的handle参数初始化一个draggable.

  $('.selector').draggable({ handle: 'h2' });

  在初始化后设置或者获取handle参数.

  //获取  var handle = $('.selector').draggable('option', 'handle');  //设置  $('.selector').draggable('option', 'handle', 'h2');

  ---

• helper

  类型:

  String, Function

  默认值:

  'original'

  允许使用一个辅助元素来进行拖动时展示. 允许使用的值: 'original', 'clone', Function. 如果指定一个函数,它必须返回一个 DOMElement.

  代码示例

  使用指定的helper参数初始化一个draggable.

  $('.selector').draggable({ helper: 'clone' });

  在初始化后设置或者获取helper参数.

  //获取  var helper = $('.selector').draggable('option', 'helper');  //设置  $('.selector').draggable('option', 'helper', 'clone');

---

事件说明

• start

  类型:

  dragstart

  在拖动开始时触发此事件.

  代码示例

  提供一个回调函数来处理start事件作为初始化选项.

  $('.selector').draggable({     start: function(event, ui) { ... }  });

  使用dragstart类型来绑定start事件.

  $('.selector').bind('dragstart', function(event, ui) {    ...  });

  ---

• drag

  类型:

  drag

  在拖动进行时触发此事件.

  代码示例

  提供一个回调函数来处理drag事件作为初始化选项.

  $('.selector').draggable({     drag: function(event, ui) { ... }  });

  使用drag类型来绑定drag事件.

  $('.selector').bind('drag', function(event, ui) {    ...  });

  ---

• stop

  类型:

  dragstop

  当拖动停止时触发此事件.

  代码示例

  提供一个回调函数来处理 stop 事件作为初始化选项.

  $('.selector').draggable({     stop: function(event, ui) { ... }  });

  使用dragstop类型来绑定stop事件.

  $('.selector').bind('dragstop', function(event, ui) {    ...  });

---

方法说明

• destroy

  方法签名:

  .draggable( 'destroy' )

  完全移除拖动功能. 这将使元素返回到之前的初始化状态.

  ---

• disable

  方法签名:

  .draggable( 'disable' )

  关闭拖动.

  ---

• enable

  方法签名:

  .draggable( 'enable' )

  打开拖动.

  ---

• option

  方法签名:

  .draggable( 'option' , optionName , [value] )

  获取或者设置拖动参数. 如果没有提供参数值则是获取.

http://www.rainweb.cn/JqueryUIStudy/Draggable.html