jQuery UI : Droppable Widget
Learn how to use jQuery UI Droppable Interaction
jQuery UI : Droppable Interaction
The jQuery UI Droppable Interaction API allows you provide a area for the dragged object to be dropped.You need to specify a region of the page as dropppable and when a drag object is dropped onto this region, some action happens.
The droppable interaction is always in combination with a draggable interaction, a droppable event is created using the method droppable() , functionalities are added using handler function and its related events.
Table : jQuery UI Droppable Setting
|create||The Event is triggered when the droppable interaction is applied.|
|activate||Event is Triggered when the user begins to drag a draggable Element.|
|deactivate||Event is triggered when the user stops dragging the draggable Element .|
|over||The event is triggered when the user brings the draggable element over the drop area.|
|out||Event is triggered when the user drags a draggable Element out|
|drop||Event is triggered when the user drops the draggable element on the drop area|
jQuery UI Droppable Interaction : Creating a Droppable Interaction
jQuery UI Droppable Interaction is created using the method droppable() on a div Element, all setting object which define the handler are within this method.
In the demo, when you drag the draggable the element from the drag area to drop area, the text of the draggable element changes using the text method.
Example: jQuery UI Droppable Interaction - Create Droppable InteractionGive it a TRY! » Note: The text content of the draggable Element changes when element is dropped, using drop event and text method
jQuery UI Droppable Interaction : Highlighting Drop Traget
The jQuery UI Droppable Interaction can make use of the events of activate and deactivate events to highlight the drop target when the user begins to drag the draggable Object.
In the demo below, the droppable element triggers the event activate and the related handler function uses the CSS method to apply CSS style rules. The event deactivate removes the CSS properties when the draggable object is dropped on the target.
Example: jQuery UI Droppable - Highlighting Drop TargetGive it a TRY! » Note: The drop area is highlighted when the dragging is still in progress
jQuery UI Droppable Interaction : Overlapping Elements
The jQuery UI Droppable Interaction can be refined using the event over and out. The event over is triggerd when half(50%) of the draggable Element is over the drop area.
Similary, the event out is trigger when the element is no longer overlapping the drop area. We have used the event handler to highlight the drop area when the element hovers the drop area.
Example: jQuery UI Droppable Interaction - Overlapping ElementsGive it a TRY! » Note: The limit of 50% is default value of setting tolerance, users can set a custom tolerance value as well.
jQuery UI Droppable Interaction : Configuration
The jQuery UI Droppable Interaction provides a rich set to options to configure the behaviour and settings of drag-drop Interaction
|disabled||When set to true, the interaction is disabled initially. The default Value is false.|
|accept||To refine the draggable elements that are acceptable to the droppable element. The default value is *, i.e all the element.|
|activeClass||A set the class that is applied in on the occurence of activate event and removed when on the occurence of deactivate Event.|
|hoverClass||To Specify a class that is applied when the in response the event of over and is removed in response to out event.|
|tolerance||To set the amount of overlap that must occur before the event is triggered.|
jQuery UI Droppable Interaction : Narrow Down Draggable Element
The set of elements which can be dragged can be narrowed down using the setting accept.The value for the setting accept is an id selector.
In the demo , there are two draggables with id value of item1 and item2, using the setting accept we have narrowed only the first element to be accepted on the drop area.
Example: jQuery UI Droppable Narrow Down Droppable ElementGive it a TRY! » Note: The second draggable element fails to match the selector hence the related events are not fired.
jQuery UI Droppable : Highlighting the Droppable Element
jQuery UI Droppable Interaction can be used to highlight the appearance of drop area using settings of activeClass and hoverClass using events of activate, deactivate , over and out
In the demo, the CSS styles are used a values for the setting activeClass and hoverClass
Example: jQuery UI Draggable : Highlight Droppable Element using ClassesGive it a TRY! » Note: The adding and Removal of classes are handled using droppable Interaction.
jQuery UI Droppable: Setting the Overlap Tolerance
jQuery UI Droppable Interactions event of over is triggered when the draggable element overlaps the drop area by atleast 50%. However these settings can be changed based on user requirements.
The table below has a list of values for the tolerance setting
Table: jQuery UI Droppable Interactions Tolerance Values
|fit||The dragged Element must overlap the droppable ELement Completely|
|intersect||At least half(50%) of the draggable Element must overlap the droppable Element. It is the default Value.|
|pointer||To mouse pointer must be over the droppable element, the position where the user grabs the draggable element does not matter.|
|touch||The element dragged must overlap the droppable element by any amount.|
In the demo below, we have two droppable elements with different settings for tolerance, the first has value of fit and second has the value of touch.
In the demo, the first drop element is highlighted when the dragged element completely overlaps it, while the second one is highlighted when the dragged element just touches it.
Example: jQuery UI Droppable Interaction Setting the toleranceGive it a TRY! » Note:The tolerance setting is used to determine the extent of overlap.
jQuery UI Droppable Interaction: Droppable Methods
The jQuery UI Draggable Interaction has a set of core method, but nothing specific to Interaction with the Mouse Pointer.
Table: jQuery UI Droppable Interactions Tolerance Values
|droppable("destroy")||To remove all interactions from the element|
|droppable("disable")||To disable the droppable interaction|
|droppable("enable")||To Enable the droppable interaction|
|droppable("option")||The alter one or multiple Settings.|