draggable(拖动) · easyUI

### 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创建一个可拖动的元素。 1. <divid="dd"style="width:100px;height:100px;"> 1. <divid="title"style="background:#ccc;">title</div> 1. </div> <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 1. $('#dd').draggable({ 1. handle:'#title' 1. }); $('#dd').draggable({ handle:'#title' }); #### #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>proxy</td> <td>string,function</td> <td> <p>在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, </p> <p>它将返回一个jquery对象。 </p> <p>下面的例子显示了如何创建一个简单的代理对象。</p><pre>$('.dragitem').draggable({ proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } }); </pre></td> <td>null</td></tr><tr><td>revert</td> <td>boolean</td> <td>如果设置为true，在拖动停止时元素将返回起始位置。</td> <td>false</td></tr><tr><td>cursor</td> <td>string</td> <td>拖动时的CSS指针样式。</td> <td>move</td></tr><tr><td>deltaX</td> <td>number</td> <td><span lang="zh-CN" id="result_box" class="short_text" a="undefined" c="4" closure_uid_569652002="107" ud="null"><span closure_uid_569652002="597">被拖动的元素</span><span closure_uid_569652002="598">对应</span><span closure_uid_569652002="599">于</span><span closure_uid_569652002="600">当前光标</span><span closure_uid_569652002="601">位置x。</span></span></td> <td>null</td></tr><tr><td>deltaY</td> <td>number</td> <td><span lang="zh-CN" id="result_box" class="short_text" a="undefined" c="4" closure_uid_569652002="107" ud="null"><span closure_uid_569652002="597">被拖动的元素</span><span closure_uid_569652002="598">对应</span><span closure_uid_569652002="599">于</span><span closure_uid_569652002="600">当前光标</span><span closure_uid_569652002="601">位置y。</span></span></td> <td>null</td></tr><tr><td>handle</td> <td>selector</td> <td>开始拖动的句柄。</td> <td>null</td></tr><tr><td>disabled</td> <td>boolean</td> <td>如果设置为true，则停止拖动。</td> <td>false</td></tr><tr><td>edge</td> <td>number</td> <td>可以在其中拖动的容器的宽度。</td> <td>0</td></tr><tr><td>axis</td> <td>string</td> <td>定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动。</td> <td>null</td></tr></tbody></table> #### #### 事件 | **Name** | **Parameters** | **Description** | |-----|-----|-----| | onBeforeDrag | e | 在拖动之前触发，返回false将取消拖动。 | | onStartDrag | e | 在目标对象开始被拖动时触发。 | | onDrag | e | 在拖动过程中触发，当不能再拖动时返回false。 | | onStopDrag | e | 在拖动停止时触发。 | #### #### 方法 | **Name** | **Parameter** | **Description** | |-----|-----|-----| | options | none | 返回属性对象。 | | proxy | none | 如果代理属性被设置则返回该拖动代理元素。 | | enable | none | 允许拖动。 | | disable | none | 禁止拖动。 |