jQuery EasyUI Basic Plugin - Draggable
Redefine the default defaults with $.fn.draggable.defaults.
Usage
Create a draggable element 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 a draggable element 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 |
|---|---|---|---|
| proxy | string,function | The proxy element to use while dragging. Set to 'clone' to use a cloned element as the proxy. If a function is specified, it must return a jQuery object. <br>Example of creating a simple proxy object: $('.dragitem').draggable({<br> proxy: function(source){<br> var p = $('<div style="border:1px solid #ccc;width:80px"></div>');<br> p.html($(source).html()).appendTo('body');<br> return p;<br> }<br>}); | null |
| revert | boolean | If set to true, the element will return to its start position after dragging. | false |
| cursor | string | The CSS cursor during the drag. | move |
| deltaX | number | The X position of the dragged element relative to the current cursor. | null |
| deltaY | number | The Y position of the dragged element relative to the current cursor. | null |
| handle | selector | The handle that initiates the draggable action. | null |
| disabled | boolean | If set to true, stops the draggable action. | false |
| edge | number | The width within which the drag can start. | 0 |
| axis | string | Defines the axis on which the element can be dragged, available values are 'v' or 'h'. When set to null, it will move in both '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 the drag. Returning false will not perform the actual drag. |
| 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 | Enables the drag action. |
| disable | none | Disables the drag action. |