Draggable 可拖动

来源:互联网 发布:高斯键盘知乎 编辑:程序博客网 时间:2024/04/30 09:10

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. });  

属性

NameTypeDescriptionDefaultproxystring,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;}});
nullrevertboolean如果设置为true,当拖动结束时,元素将返回到原始位置。falsecursorstring拖动时css光标。movedeltaXnumber拖动元素相对于当前光标x的位置。nulldeltaYnumber拖动元素相对于当前光标y的位置。nullhandleselector启动draggable的处理(handle)。
nulldisabledboolean为true禁止拖动。falseedgenumber在可移动范围内拖动。0axisstring定义拖动元素可在其上移动的轴,可用的值是'V'或'h',当设置为null,将会沿着'v'和'h'的方向移动。null

事件 

NameParametersDescriptiononBeforeDrage拖动之前触发,返回false取消拖动。onStartDrage当目标对象开始拖动时触发。onDrage当拖动期间触发。返回false将不做真正的拖动。.onStopDrage当拖动结束时触发。

方法

NameParameterDescriptionoptionsnone返回选项的属性。proxynone如果拖动属性被设置,返回拖动代理。enablenone启用拖动动作。disablenone禁止拖动动作。

原创粉丝点击