JQueryUI - Day 3 ( Droppable )

Before reading this article, I would recommend reading the following previous parts:

Droppable widget create a target for draggable element. jQueryUI droppable widget makes the selected element to draggable and droppable widget define which draggable elements are accepted by a droppable element. Now we read about the options, methods and events that are associated with a droppable element.

Firstly, create a draggable and droppable element.

HTML Code

<divid="drag">
<spanid="span1">Draggable Element</span>
<br/>
<spanid="span2">Drag Me</span>
</div>
<divid="drop">
<spanid="span2">Drop Here!</span>
</div> jQuery Code: $(document).ready(function () { $("#drag").draggable(); $("#drop").droppable(); });

CSS Code

<style>
#drag {
background-color: paleturquoise;
border-style: groove;
border-color: chocolate;
font-size: 20px;
width: 230px;
height: 100px;
margin-left: 150px;
margin-top: 200px;
text-align: center;
}
#drop {
background-color: burlywood;
border-style: groove;
border-color: CaptionText;
font-size: 26px;
width: 330px;
height: 200px;
margin-left: 150px;
margin-top: 200px;
text-align: center;
}
#span1 {
font-size: 26px;
color: darkolivegreen;
}
</style>

Design of web Page

Options

accept Option:

The accept option define which draggable element is accepted by the droppable. A function is called for each draggable on the page. This method returns true if the draggable should be accepted.

Example:

$("#drop").droppable({
accept: "#drag"
});

In this code droppable element with “drop” id will accept the draggable element whose id is “drag”.

activeClasses Option:

The activeClasses option specify that, the class will be added to the droppable while an acceptable draggable is being dragged.

Example:

$("#drop").droppable(
{
accept: "#drag",
activeClass: "ui-state-highlight"
});

Output:

activeClasses Option

addClasses Option:

If addClasses option is set to “false” then “ui-droppable” will not be added to droppable element. This may be desired as a performance optimization when calling a large number of elements.

Example:

$("#drop").droppable(
{
accept: "#drag",
addClasses: false
});

disabled Option:

The disabled option disable the droppable element if set to “true”.

Example:

$("#drop").droppable(
{
accept: "#drag",
activeClass: "ui-state-highlight",
disabled: true
});

Output:

We can see the mage background color in the preceding image of droppable element even though the activeClasses option is defined. This happened because disable option is set to “true”.

greddy Option:

If greddy option is set to “true” then greddy option can be used to identify which droppable receive the draggable element among the nested elements. By default, when an element is dropped on nested droppable , each droppable will receive the element. So by defining the option to “true” any parent element will not receive the droppable element.

Example:

$("#drop").droppable(
{
accept: "#drag",
greddy: true
});

hoverClass Option:

The hoverClass option define the class that will be added when a draggable element will hover over the droppable element.

Example:

$("#drop").droppable(
{
accept: "#drag",
hoverClass: "ui-drop-hover"
});
Ui - drop - hover class is defined as.ui - drop - hover
{
background - color: #FFFF55!important;
border: 2 pxsolid# bbb;
}

scope Option:

The scope option is used to group sets of draggable and droppable items. A draggable with the same scope value as a droppable will be accepted.

Example:

$("#drag").draggable(
{
scope: "accept"
});
$("#drop").droppable(
{
accept: "#drag",
activeClass: "ui-state-highlight",
scope: "accept"
});

Output:

scope Option

In above code “ui-state-highlight” classes are activated because both draggable and droppable element have same scope name . Let’s try to change the scope of any element.

$("#drag").draggable(
{
scope: "accept1"
});
$("#drop").droppable(
{
accept: "#drag",
activeClass: "ui-state-highlight",
scope: "accept"
});

Output:

element

Now we can see that background color is not changed because this time scope variable of both the elements have different values so “ui-state-highlight” class did not activated.

tolerance Option:

The tolerance option specify that which mode is used to test that draggable element is hovering over the droppable element. The tolerance option can have any value among the below options.

Fit: When draggable element overlaps the droppable element.

Example:

$("#drop").droppable(
{
accept: "#drag",
hoverClass: "ui-state-highlight",
tolerance: "fit"
});

Output:

tolerance Option

Intersect: When draggable element overlaps the droppable at least 50% in both directions.

Example:

$("#drop").droppable(
{
accept: "#drag",
hoverClass: "ui-state-highlight",
tolerance: "intersect"
});

Output:

Intersect

Pointer: When mouse pointer overlaps the droppable.

Example:

$("#drop").droppable(
{
accept: "#drag",
hoverClass: "ui-state-highlight",
tolerance: "pointer"
});

Output:
Pointer

Touch: When draggable element overlaps the droppable any amount.

Example:

$("#drop").droppable(
{
accept: "#drag",
hoverClass: "ui-state-highlight",
tolerance: "touch"
});

Output

Touch

Methods

destroy Method:

The destroy() method removes the complete droppable functionality and return the element into its pre initial state.

Example:

$("#drop").droppable("destory");

Disable Method:

The disable() method disables the droppable element.

Example:

$("#drop").droppable("disable");

Enable method:

The enable method enables the droppable element.

Example:

$("#drop").droppable("enable");

option Method:

The option method is used to get or set the option for the droppable elements.

Option as getter:

We can get the value currently associated with the specified option name.

Example:

$("#drag").draggable();
$("#drop").droppable({ disabled: "flase" });
alert("Disabled is set to=" + $("#drop").droppable("option", "disabled"));

Output:

Option as getter

Option as setter:

We can assign value of any option by passing the option name and it’s value.

Example:

Events

activate (event, ui) Event:

The activate event is called when an accepted draggable start dragging. The event object define the event and ui parameter define several types of object like the following,

Draggable: Represent the dragging object.
Helper: Define the helper that is being dragged.
Position: Current css position
Offset: Current offset position.

Example:

("#drop").droppable(
{
activate: function(event, ui)
{
alert("Left Position is=" + ui.position.left + "\n" + "top Position is=" + ui.position.top + "\n" + "Left offset is=" + ui.offset.left + "\n" + "top offset is=" + ui.offset.top + "\n")
}
});

Output:

Events

create (event, ui ) Event:

This event is triggered when a droppable element is created.

Example:

$("#drop").droppable({
create: function (event, ui) {
alert("Droppable Has Been Created");
}
});

deactivate(event, ui) Event:

This event is triggered when an accepted draggable stop dragging. The event object define the event and ui parameter define several types of object like.

Draggable: Represent the dragging object.
Helper: Define the helper that is being dragged.
Position: Current css position
Offset: current offset position.

Example:

$("#drop").droppable({
deactivate: function (event, ui) {
alert("Left Position is=" + ui.position.left + "\n" +
"top Position is=" + ui.position.top + "\n" +
"Left offset is=" + ui.offset.left + "\n" +
"top offset is=" + ui.offset.top + "\n")}

Output:

message

drop(even, ui) Event:

The drop event is called when an accepted draggable is dropped on the droppable. The event object define the event and ui parameter define several types of object like.

Draggable: Represent the dragging object.
Helper: Define the helper that is being dragged.
Position: Current css position
Offset: current offset position.

Example:

drop: function (event, ui) {
alert("Left Position is=" + ui.position.left + "\n" +
"top Position is=" + ui.position.top + "\n" +
"Left offset is=" + ui.offset.left + "\n" +
"top offset is=" + ui.offset.top + "\n")}

Output:

run

out (event, ui) Event:

The out event is triggered when accepted draggable is dragged out of the droppable scope.

Example:

$("#drop").droppable({
out: function (event, ui) {
//Event is occured when dragged element will become out of scope
}
});

over(event, ui) Event:

The over event is triggered when accepted draggable is dragged over the droppable. The event object define the event and ui parameter define several types of object like.

Draggable: Represent the dragging object.
Helper: Define the helper that is being dragged.
Position: Current css position
Offset: Current offset position.

Example:

$("#drop").droppable(
{
over: function(event, ui)
{
alert("Left Position is=" + ui.position.left + "\n" + "top Position is=" + ui.position.top + "\n" + "Left offset is=" + ui.offset.left + "\n" + "top offset is=" + ui.offset.top + "\n")
}
});

Output:

Output

Today we learned about Droppable widget of jQueryUI. In next article we will learn about another jQueryUI widget.

Thanks for reading the article.

7 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Thanks for nice article. Keep it up
Pankaj Kumar Choudhary10y ago
Thanks Sabyasachi Mishra Sir..............
Pankaj Kumar Choudhary10y ago
Thanks Kumaresh Rajalingam Sir.............
Pankaj Kumar Choudhary10y ago
Thanks Neeraj Kumar...........
Sabyasachi Mishra10y ago
Good one
Kumaresh Rajalingam10y ago
Nice one
Neeraj Kumar10y ago
Good Pankaj Kumar Choudhary