@author YHC
覆盖默认值$.fn.draggable.defaults
使用示例
从标记创建 draggable
<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创建
draggable
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
属性
Name | Type | Description | Default |
---|---|---|---|
proxy | string,function | 一个代理元素使用在拖动的时候, 当设置 'clone', 一个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 | 如果设置为, 当拖动结束的使用,这个元素将回到它开始的位置. | false |
cursor | string | 当拖动的时候,一个css cursor(鼠标的样式,自己查css文档). | move |
deltaX | number | 拖动元素位置x对应当前光标. | null |
deltaY | number | 拖动元素位置y对应当前光标. | null |
handle | selector | 可以被拖动的元素的选择器. | null |
disabled | boolean | true停止拖拽. | false |
edge | number | 拖动的宽度,距离边缘多少可以被拖动. | 0 |
axis | string | 定义一个拖动元素拖动的轴,可用值有: 'v' or 'h', 当设置为null 时,可以水平和垂直方向随意拖动. | null |
事件
Name | Parameters | Description |
---|---|---|
onBeforeDrag | e | 拖动之前触发, 返回false取消拖动动作. |
onStartDrag | e | 目标对象开始拖动时触发. |
onDrag | e | 拖动期间触发. 返回false将不能拖动. |
onStopDrag | e | 当拖动结束时候触发. |
方法
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 属性. |
proxy | none | 如果proxy属性已经设置,返回拖动的代理对象. |
enable | none | 启用拖动动作. |
disable | none | 禁用拖动动作. |