jquery Draggable学习笔记

首先接触到的是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代码
$(function(){ $("#draggable_y").draggable({ axis: 'y' });//Y方向拖动 $("#draggable_x").draggable({ axis: 'x' });//X方向拖动 $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });//容器拖动 })



3、拖动或恢复到原位置

拖动我恢复到原位置

对比下我们的效果









点我查看详细html代码
<div id="draggable_Revert" class="ui-widget-content"> <p>拖动我恢复到原位置</p> </div> <div id="draggable_Revert1" class="ui-widget-content"> <p>对比下我们的效果</p> </div>

点我查看详细jquery代码
$(function(){ $("#draggable_Revert").draggable({ revert: true });//拖动恢复到原位置 $("#draggable_Revert1").draggable({ revert: true, helper: 'clone' });//拖动恢复到原位置 })

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

点我可以拖
拖不了

点我可以拖

拖
不了









点我查看详细html代码
<div class="demo"> <div id="draggable_handle" class="ui-widget-content"> <p class="ui-widget-header" >点我可以拖</p> 拖不了 </div> <div id="draggable_handle1" class="ui-widget-content"> <p>点我可以拖</p> <p class="ui-widget-header" >拖<br>不了<br></p> </div> </div>

点我查看详细jquery代码
$(function(){ $("#draggable_handle").draggable({ handle: 'p' }); $("#draggable_handle1").draggable({ cancel: "p.ui-widget-header" });//指定区域拖动 })

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] )

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