Draggable（拖动）

创建时间：2014年08月23日 09:17 阅读次数：(6114)

分享到：

Draggable（拖动）

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

使用案例

通过标签创建一个可拖动的元素。

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

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

使用Javascript创建一个可拖动的元素。

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

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

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

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

属性

属性名	属性值类型	描述	默认值
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	开始拖动的句柄。	null
disabled	boolean	如果设置为true，则停止拖动。	false
edge	number	可以在其中拖动的容器的宽度。	0
axis	string	定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动。	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	禁止拖动。