首先接触到的是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] )
获取或者设置拖动参数. 如果没有提供参数值则是获取.