Updated April 14, 2023
Introduction to jQuery UI Droppable
jQuery UI Droppable is one of the jQuery UI Interaction features, always occurring in combination with jQuery UI Draggable Interaction(using the mouse to click on the draggable object and dropping it on the specified target) and implemented by jQuery UI droppable() method. Facilitates in the creation of the target areas for the draggable objects and allows them to be dropped at those specified targets, which is then followed by the occurrence of some actions, since, the method droppable() creates a droppable event which gets fired whenever a draggable object gets dropped onto a droppable(target area) and then drop event callback is used to add some functionalities to the droppable indicating that drop has occurred.
Syntax
There are two forms in which the droppable() method can be used
1. The first method specifies that DOM elements can be used as the targets where other DOM elements can be dropped.
$(selector, context).droppable(options)Where
- options: parameter specifies the behavior of DOM elements to be dropped.
$(selector, context).droppable({option1: value1, option2: value2……})One or more options can be provided by separating them with a comma.
Different options that can be used with this method are accept, tolerance, scope, etc.
2. The second method is used to perform actions on droppable elements.
$(selector, context).droppable("action", params)Some of the actions which can be used with this method are accept, addClass, disabled, etc.
How does jQuery UI Droppable function works?
- jQuery UI Droppable Interaction always works in combination with jQuery UI Draggable Interaction.
- It creates targets for the dragged objects to be dropped.
- This Interaction is implemented using droppable() method which creates a droppable event and add the required functionalities using the handler function.
Examples
Below are the examples mentioned:
Example #1
Let us consider a very simple example to understand how a droppable interaction can be created with no parameter being passed to the droppable() method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#drag").draggable();
$("#drop").droppable();
});
</script>
<style>
#divstyle {
width: 400px;
height: 400px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
#drag {
width: 100px;
height: 80px;
background: yellow;
text-align: center;
padding-top: 10px;
}
#drop {
width: 150px;
height: 150px;
margin-top: 50px;
background: yellowgreen;
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="divstyle">
<center>
<h1>jQuery UI Interactions</h1>
<div id="drag">
<p><strong>Drag Me</strong></p>
</div>
<div id="drop">
<p><strong>Drop Here</strong></p>
</div>
</center>
</div>
</body>
</html>Output
- Below screen displays when the above code is executed.
- Here, Droppable Interaction is created using the droppable() method on a div element without passing any parameter.
- Here, we have specified a target area where the draggable element is to be dropped
Example #2
Here is an example that demonstrates the jQuery UI Droppable Interaction using options activate and deactivate to highlight the drop element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#drag").draggable();
$("#drop").droppable({
drop: function () {
$("#drag").text("Dropped!");
},
activate: function () {
$("#drop").css({
border: "10px solid black",
backgroundColor: "grey",
});
},
deactivate: function () {
$("#drop").css("border", "").css("background-color", "");
},
});
});
</script>
<style>
#divstyle {
width: 400px;
height: 400px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
#drag {
width: 100px;
height: 80px;
background: yellow;
text-align: center;
padding-top: 10px;
font-size: 20px;
}
#drop {
width: 150px;
height: 150px;
margin-top: 50px;
background: yellowgreen;
text-align: center;
padding-top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="divstyle">
<center>
<h1>jQuery UI Interactions</h1>
<div id="drag">
<p><strong>Drag Me</strong></p>
</div>
<div id="drop">
<p><strong>Drop Here</strong></p>
</div>
</center>
</div>
</body>
</html>Output
- Below screen displays when the above code gets executed.
- In this example, we are trying to create the jQuery UI Droppable Interaction by passing options activate and deactivate.
- As shown below, we are trying to highlight the drop target as the draggable element starts getting dragged.
- Here, the droppable element triggers the event activates and the related handler function uses the CSS method to apply the CSS styles.
- As soon as the draggable object gets dropped on the target area, the event deactivates removes the CSS styles.
- The text content of the draggable element changes after the element gets dropped, using drop event and text method.
Example #3
Here is an example that demonstrates the jQuery UI Droppable Interaction by using the options disabled and tolerance.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#drag").draggable();
$("#drop1").droppable({
drop: function (event, ui) {
$("#drag").text("Dropped!");
}
});
$( "#drop2" ).droppable({
disabled : "true",
drop: function( event, ui ) {
$("#drag").text("Dropped!");
}
});
$( "#drop3" ).droppable({
tolerance: 'touch',
drop: function( event, ui ) {
$("#drag").text("Dropped with a touch");
}
});
});
</script>
<style>
#divstyle {
width: 550px;
height: 400px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
#drag {
width: 100px;
height: 80px;
background: yellow;
text-align: center;
padding-top: 10px;
font-size: 18px;
border: solid brown;
}
#drop1,
#drop2,
#drop3 {
width: 150px;
height: 120px;
background: yellowgreen;
float: left;
margin: 10px;
font-size: 20px;
border: solid black;
}
</style>
</head>
<body>
<div id="divstyle">
<center>
<h2>jQuery UI Interactions</h2>
<div id="drag">
<p><strong>Drag Me</strong></p>
</div>
<br>
<div id="drop1">
<p><strong>Drop Here</strong></p>
</div>
<div id="drop2">
<p><strong>Disabled</strong></p>
</div>
<div id="drop3">
<p><strong>Tolerance Touch</strong></p>
</div>
</div>
</center>
</body>
</html>Output
- Below screen displays when the above code gets executed.
- In this example, we are using two other options, disabled and tolerance with the droppable()
- For the first drop element, the text content of the draggable element changes when it gets dropped.
- For the second drop element, the “disabled” option swhich is set to “true”, disables it.
- For the third drop element, as soon as the draggable element just touches the edges of the drop element, the text content of the draggable element changes.
Conclusion
In this article, we discussed the jQuery UI Droppable Interaction which allows the users to create a target drop area for the draggable object to be dropped. This Interaction always works in combination with jQuery UI Draggable Interaction.
Recommended Articles
This is a guide to jQuery UI Droppable. Here we discuss an introduction to jQuery UI Droppable, syntax, how does it work with programming examples. You can also go through our other related articles to learn more –
