Draggable
Override defaults with $.fn.draggable.defaults.
Usage Example
Create a draggable element from markup.
Create a draggable element using javascript.
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| proxy | string,function |
A proxy element to be used when dragging, when set to 'clone', a clone element is used as proxy. If a function is specified, it must return a jQuery object.
The example below shows 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 start position when dragging stops. | false |
| cursor | string | The css cursor when dragging. | move |
| deltaX | number | The dragged element position x corresponding to current cursor | null |
| deltaY | number | The dragged element position y corresponding to current cursor | null |
| handle | selector | The handle that start the draggable. | null |
| disabled | boolean | True to stop draggable. | false |
| edge | number | The drag width in which can start draggable. | 0 |
| axis | string | Defines the axis which the dragged elements moves on, available value is 'v' or 'h', when set to null will move across 'v' and 'h' direction. | null |
| delay | number | Defines the delay time in milliseconds to start a drag operation. | 100 |
Events
| Name | Parameters | Description |
|---|---|---|
| onBeforeDrag | e | Fires before dragging, return false to cancel this dragging. |
| onStartDrag | e | Fires when the target object start dragging. |
| onDrag | e | Fires during dragging. Return false will not do dragging actually. |
| onEndDrag | e | Fires when the dragging ends. This event is triggered before onStopDrag event. Available since version 1.5.3. |
| onStopDrag | e | Fires when the dragging stops. |
Methods
| Name | Parameter | Description |
|---|---|---|
| options | none | Return the options property. |
| proxy | none | Return the drag proxy if the proxy property is setted. |
| enable | none | Enable the drag action. |
| disable | none | Disable the drag action. |