jQuery UI Droppable

jQuery UI facilitates you to use droppable() method to make any DOM element droppable at a specified target.

Syntax:

You can use the droppable () method in two forms:

First Method

The droppable (options) method specifies that you can use an HTML element as an element in which you can drop other elements. Here, the option parameter specifies the behavior of the elements involved.

Syntax:

You can use one or more options at a time using JavaScript object. If you are using more than one option then will have to separate them by using a comma. For example:

Following is a list of the different options that can be used with this method:

OptionDescription
acceptThis option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclassThis option is 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. by default its value is false.
addclassesThis option when set to false will prevent the ui-droppable class from being added to the droppable elements. by default its value is true.
diasabledThis option when set to true disables the droppable. by default its value is false.
greedyThis option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclassThis option is 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. by default its value is false.
scopeThis option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default".
tolerenceThis option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is "intersect".

jQuery UI Droppable() method example 1

Let's take an example to demonstrate the jQuery UI Droppable() method with no parameter.

Test it Now

jQuery UI Droppable() method example 2

b) How to use addClass, disabled and tolerance:

Following example specifies how to use these three options addClass, disable and tolerance in the drop function of jQuery UI.

Test it Now

jQuery UI Droppable() method example 3

c) How to select elements to be dropped:

The following example specifies how to use accept and scope options in the drag function of jQuery UI:

Test it Now

jQuery UI Droppable() method example 4

d) How to use activeClass and hoverClass :

activeClass and hoverClass options of jQuery UI are used to manage appearance. Let?s take an example to demonstrate this effect:

Test it Now

Second Method

The droppable ("action", params) method is used to perform an action on droppable elements, like preventing droppable functionality. You have to pass an action specified as a string in the first argument. i.e. "disable" to prevent the drop.

Syntax:

Following is the list of actions that can be used with this method:

ActionDescription
acceptThis option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclassThis option is 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. by default its value is false.
addclassesThis option will prevent the ui-droppable class from being added to the droppable elements,when set to false.by default its value is true.
disabledThis option disables the droppable,when set to true. by default its value is false.
greedyThis option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclassThis option is 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. by default its value is false.
scopeThis option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default".
tolerenceThis option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. by default its value is "intersect".

jQuery UI Droppable() method example 5

Let's take an example to demonstrate the use of destroy () method:

Test it Now

There are some event methods in jQueryUI which get triggered for a particular event. Following are some event methods.

Event MethodDescription
activate(event, ui)This event is triggered when the accepted draggable element starts dragging. this can be useful if you want to make the droppable "light up" when it can be dropped on.
create(event,ui)This event is triggered when a droppable element is created. ?where? event is of type event, and "ui" is of type object.
deactivate(event,ui)This event is triggered when an accepted draggable stops dragging. "Where" event is of type event, and ui is of type object.
drop(event,ui)This action is triggered when an element is dropped on the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object.
out(event,ui)This event is triggered when an accepted draggable element is dragged out of the droppable. this is based on the tolerance option. ?Where? event is of type event, and "ui" is of type object.
over(event,ui)This event is triggered when an accepted draggable element is dragged over the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object.

jQuery UI Droppable() method example 6

Let's take an example to demonstrate the "drop", "over" and "out" events during drop functionality.

Test it Now



Latest Courses