jQuery UI : Drag Drop Applications
Learn how to use jQuery UI Drag and Drop in Combination
jQuery UI Drag-Drop Interaction :
The jQuery UI Drag-Drop Interaction setting of scope can be used is used to filter the elements that will activate the drop Element.
A droppable Element will be activated when a draggable element with the same scope is dragged.
Example: jQuery UI Drag-Drop Interaction - Setting the ScopeGive it a TRY! » Note:The draggable element will be activate and be accepted only by the droppable with same value of scope.
jQuery UI Drag-Drop Interaction : Helper Element
The jQuery UI Drag-Drop Interaction setting of helper can be used to specify an element that will be dragged instead of the original element.
In the demo, setting helper has the value of clone which instructs the jQuery UI to create a copy of the draggable element and all its content and then use the resultant as the value of the helper Element.
Example: jQuery UI Draggable - Large DraggableGive it a TRY! » Note: The helper Element is removed when the dragged element is dropped.
jQuery UI Drag-Drop Interaction : Function as a value for Helper Setting.
The jQuery UI Drag-Drop Interaction setting of helper can be assigned function as value as well. In the demo, we use a smaller version of the draggable element as the value of the helper element using a function
Example: jQuery UI Draggable Interaction - Limiting the Drag RegionGive it a TRY! » Note:Large Elements make it difficult to see the underlying element, hence a smaller version is used.
jQuery UI Drag-Drop: Manipulate the Helper Element
jQuery UI Drag Drop Interaction has a ui object that jQuery UI passes to the droppable Event containing property helper, which can be used to manipulate the helper element when dragging is in propgress.
In the demo we use the events of over and out along with the ui.helper property to apply CSS property on it.