Search within TutorialsPark

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

Event Description
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 Interaction

Give 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 Target

Give 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 Elements

Give 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

Settings Descriptions
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 Element

Give 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 Classes

Give 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

Values Description
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 tolerance

Give 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

Values Description
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.