jQuery EasyUI Basic Plugin -Draggable

jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.fn.draggable.defaults.

Usage

Create draggable elements via markup.

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

Create draggable elements using JavaScript.

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

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

Properties

Name Type Description Default Value
proxy string,function The proxy element to use when dragging. When set to 'clone', the cloned element is used as the proxy. If a function is specified, it must return a jQuery object.
The example below demonstrates how to create a simple proxy object.
$('.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 If set to true, the element will return to its starting position when dragging ends. false
cursor string The CSS cursor to use while dragging. move
deltaX number The X-axis position of the dragged element relative to the current cursor. null
deltaY number The Y-axis position of the dragged element relative to the current cursor. null
handle selector The handle used to initiate dragging. null
disabled boolean If set to true, disables the draggable. false
edge number The width within which dragging can be initiated. 0
axis string Defines the axis on which the dragged element can move. Available values are 'v' or 'h'. When set to null, it moves along both the 'v' and 'h' directions. null

Events

Name Parameters Description
onBeforeDrag e Triggered before dragging; returning false cancels the drag.
onStartDrag e Triggered when the target object starts dragging.
onDrag e Triggered during dragging. Returning false will not perform the actual dragging.
onStopDrag e Triggered when dragging stops.

Methods

Name Parameters Description
options none Returns the options property.
proxy none Returns the drag proxy if the proxy property is set.
enable none Enable the dragging action.
disable none Disable the dragging action.
jQuery EasyUI 插件jQuery EasyUI Plugin Other Extensions