Draggable 可拖动

Draggable 可拖动

用$.fn.draggable.defaults重写默认值。

用法示例

用标签创建一个可拖动元素。

1. <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">  
2.     <div id="title" style="background:#ccc;">title</div>  
3. </div>  

用jsavascript创建一个可拖动元素。

1. <div id="dd" style="width:100px;height:100px;">  
2.     <div id="title" style="background:#ccc;">title</div>  
3. </div>  

1. $('#dd').draggable({  
2.     handle:'#title'  
3. });  

属性

Name	Type	Description	Default
proxy	string,function	拖动时要使用的代理元素，设置为'clone'时，克隆元素将被用作代理。如果指定一个函数，那它必须返回一个jQuery对象。 下面的示例展示了如何创建一个简单的代理对象。 $('.dragitem').draggable({ proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } });	null
revert	boolean	如果设置为true，当拖动结束时，元素将返回到原始位置。	false
cursor	string	拖动时css光标。	move
deltaX	number	拖动元素相对于当前光标x的位置。	null
deltaY	number	拖动元素相对于当前光标y的位置。	null
handle	selector	启动draggable的处理（handle）。	null
disabled	boolean	为true禁止拖动。	false
edge	number	在可移动范围内拖动。	0
axis	string	定义拖动元素可在其上移动的轴，可用的值是'V'或'h'，当设置为null，将会沿着'v'和'h'的方向移动。	null

事件 

Name	Parameters	Description
onBeforeDrag	e	拖动之前触发，返回false取消拖动。
onStartDrag	e	当目标对象开始拖动时触发。
onDrag	e	当拖动期间触发。返回false将不做真正的拖动。.
onStopDrag	e	当拖动结束时触发。

方法

Name	Parameter	Description
options	none	返回选项的属性。
proxy	none	如果拖动属性被设置，返回拖动代理。
enable	none	启用拖动动作。
disable	none	禁止拖动动作。