jQuery UI Droppable

A DOM element can be made droppable at a specified target using the droppable() method of the JQuery UI.

Syntax:

The droppable () method can be used in either of its two acceptable forms:

  1. $(selector, context).droppable (options) Method
  2. $(selector, context).droppable (“action”, params) Method

First Method: The droppable (options) method:

To specify that an HTML element can be used as an element in which other elements can be dropped, the droppable (options) method is used where the behavior of the elements involved is defined by the options parameter.

Syntax:

$(selector, context).droppable (options);  

Multiple options can be used at a time using a JavaScript object by separating them using a comma.

Syntax:

$(selector, context).droppable({option1: value1, option2: value2..... });  

The popular options that can be used with this method are listed below:

Option Uses
accept To control which draggable elements are to be accepted for dropping. The default value is *.
activeclass To specify a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. The default value is false.
addclasses To restrict the ui-droppable class from being added to the droppable elements, when set to false. The default value is true.
diasabled To disable the droppable, when set to true. The default value is false.
greedy To control which draggable elements are to be accepted for dropping on nested droppables. Any parent droppables will not receive the element, when set to true. The default value is false.
hoverclass To specify a string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. The default value is false.
scope To restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). The default value is “default”.
tolerance To specify which mode to use for testing whether a draggable is hovering over a droppable. The default value is “intersect”.

Example 1:

  
  
     
        
      jQuery UI Droppable - Default functionality  
        
        
        
        
     
     
      

Hello

World!!

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use of the jQuery UI Droppable() method. Here, we are passing no parameter.

Example 2:

  
  
     
        
      jQuery UI Droppable - Default functionality   
        
        
        
        
  
  
   

Drag to the Target.

Target

Disabled

Drop to touch the boundary.

Drop within the box.

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the way to use and the behavior of the addClass, disable and tolerance options in the drop function of the jQuery UI.

Example 3:

  
  
     
        
      jQuery UI Droppable - Default functionality   
        
        
        
     
  
  
   

Students of Class 1A

Students of Class 2A


Class 1A

Class 2A


Students of Class 3A

Students of Class 4A


Class 3A

Class 4A

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are displaying the way to use accept and scope options in the drag function of the jQuery UI. Drop the Students box to their respective classes to see the effect.

Example 4:

  
  
     
        
      jQuery UI Droppable - Default functionality  
        
        
        
        
     
  
  
 

Drag me to the Target!!

Hover or Drop here!!

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying the effect of the activeClass and hoverClass options of jQuery UI. They are used to manage appearance. Hover on the target box and then drop to the target box to see the change in appearances.

Second Method: The droppable (“action”, params) method:

To act on droppable elements, such as preventing droppable functionality, the droppable (“action”, params) method is used. An action specified as a string is passed in the first argument. To prevent the drop, “disable” is passed as the first argument.

Syntax:

$(selector, context).droppable ("action", params);  

The popular actions that can be used with this method are listed below:

Action Uses
accept To control which draggable elements are to be accepted for dropping. The default value is *.
activeclass To specify a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. The default value is false.
addclasses To restrict the ui-droppable class from being added to the droppable elements, when set to false. The default value is true.
disabled To disable the droppable, when set to true. The default value is false.
greedy To control which draggable elements are to be accepted for dropping on nested droppables. Any parent droppables will not receive the element, when set to true. The default value is false.
hoverclass To specify a string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. The default value is false.
scope To restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). The default value is “default”.
tolerence To specify a string to indicate the mode to use for testing whether a draggable is hovering over a droppable. The default value is “intersect”.

Example 5:

  
  
     
        
      jQuery UI Droppable - Default functionality  
        
        
        
        
        
     
     
      

Drag Me

Drag Me

Drag Me

Target 1
Target 2
Target 3

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use of the destroy () method:

The popular event methods in jQueryUI are listed below. Each of these gets triggered for a particular event.

Event Method Uses
activate(event, ui) Triggered when the accepted draggable element starts dragging. It is used to make the droppable “light up” when it can be dropped on.
create(event,ui) Triggered when a droppable element is created, where “event” is of type event, and “ui” is of type object.
deactivate(event,ui) Triggered when an accepted draggable stops dragging, where “event” is of type event, and ui is of type object.
drop(event,ui) Triggered when an element is dropped on the droppable, based on the tolerance option, where “event” is of type event, and “ui” is of type object.
out(event,ui) Triggered when an accepted draggable element is dragged out of the droppable based on the tolerance option, where “event” is of type event, and “ui” is of type object.
over(event,ui) Triggered when an accepted draggable element is dragged over the droppable based on the tolerance option, where “event” is of type event, and “ui” is of type object.

Example 6:

  
  
     
        
      jQuery UI Droppable - Default functionality    
        
        
        
        
     
     

Drag Me

Target

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying the use and behavior of the “drop”, “over” and “out” events during drop functionality.