Draggable（拖动）

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

用法

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

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

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

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

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

属性

属性名	属性值类型	描述	默认值
proxy	string,function	在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。下面的例子显示了如何创建一个简单的代理对象。	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
delay	number	定义元素在多少毫秒后开始移动。	100

代理元素示例

$('.dragitem').iDraggable({
  proxy: function(source){
    var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
    p.html($(source).html()).appendTo('body');
    return p;
  }
});

事件

事件名	事件参数	描述
onBeforeDrag	e	在拖动之前触发，返回false将取消拖动。
onStartDrag	e	在目标对象开始被拖动时触发。
onDrag	e	在拖动过程中触发，当不能再拖动时返回false。
onStopDrag	e	在拖动停止时触发。
onEndDrag	e	拖动停止时触发。该事件在onStopDrag事件前触发。

方法

方法名	方法参数	描述
options	none	返回属性对象。
proxy	none	如果代理属性被设置则返回该拖动代理元素。
enable	none	允许拖动。
disable	none	禁止拖动。