jQuery UI | draggable() and droppable() methods
Last Updated :
11 Jul, 2025
jQuery UI is a mixture of methods and a set of user interface effects, widgets, interactions and themes which can be provided in the web page using jQuery methods. If you want to build up a powerful web application that includes various features such as dragging, dropping, date picker, tooltips, etc. then jQuery UI is a perfect choice to build up these effects.
In this article, we are going to learn about various jQuery UI interactions.
Draggable() Method
This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.
Syntax:
The draggable() method has two forms and the use of each form depends on the requirement. These are as follows :-
$(selector, context).draggable (options);
$(selector, context).draggable ("action", [params]);
The following table shows the different options that can be used with this method:
| OPTION | PURPOSE |
|---|
| addClass | If the value of this option is set to false, it will prevent the DOM elements to be dragged . The default value this option is true. |
| axis | This option is used constrain the movement of the draggable object. If the value of this option is set to Y , then the object can be dragged in the vertical direction only and if the value of this option is set to X , then the object can be dragged into horizontal direction only. |
| containment | This option is also used constrain the movement of the draggable object within the specific region or some element.The default value this option is false. |
| opacity | This option is used to control the opacity of the draggable object while it is dragged.The default value this option is false. |
Example:
In this example, the <div> with id="d1" can be dragged anywhere within the view port, <div> with id="d2" can be dragged along X axis and <div> with id="d3" can be dragged along Y axis.
Code #1:
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Draggable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/
1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#d1 {
width: 120px;
height: 120px;
background-color :aqua;
padding:20px;
float:left;
margin:5px;
}
#d2 {
width: 120px;
height: 120px;
background-color :orange;
padding:20px;
float:left;
margin:5px;
}
#d3 {
width: 120px;
height: 120px;
background-color :yellow;
padding:20px;
float:left;
margin:5px;
}
</style>
<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>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<div id="d1">
<p>Drag Me Anywhere</p>
</div>
<div id="d2">
<p>Drag Me Horizontally</p>
</div>
<div id="d3">
<p>Drag Me Vertically</p>
</div>
<script type="text/javascript">
$( function() {
$("#d1").draggable();
} );
$( function() {
$("#d2").draggable({axis:"x"});
} );
$( function() {
$("#d3").draggable({axis :"y"});
} );
</script>
</body>
</html>
Output:
Before Dragging
After Dragging
Droppable() Method:
This method allows the elements to be dropped with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drop anywhere within the view port on the specified target. This can be done by clicking on the draggable object by mouse and drop it on the specified target.
Syntax:
The droppable() method has two forms and the use of each form depends on the requirement. These are as follows :-
$(selector, context).droppable (options)
$(selector, context).droppable ("action", params)
The following table shows the different options that can be used with this method:
| OPTION | PURPOSE |
|---|
| accept | The value of this option specifies that which draggable objects can be dropped on the specified target. The default value of this option is *. |
| addClass | If the value of this option is set to false, it will prevent the DOM elements to be dropped . The default value this option is true. |
| disable | This option is also used to disable the droppable property of the DOM element.If the value of this option is set to true , then the object cannot be dropped and if the value of this option is set to false, then the object can be dropped on the specified target. |
Example :
In this example, the <div> with id="drag" is dragged and dropped over the <div> with id="drop".
Code #1:
HTML
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#drag
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :aqua;
padding:10px;
}
#drop
{
width: 150px;
height: 150px;
float: left;
margin: 10px;
background-color:yellow;
padding:10px;
}
</style>
<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()
{
alert("I am dropped");
}
} );
} );
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
<p>Drag Me</p>
</div>
<div id="drop">
<p>Drop On Me</p>
</div>
</center>
</body>
</html>
Output:
Before Dropping
After Dropping
Code #2:
In this example, the <div> with id="drag" is dragged and dropped over the <div> with id="drop" and it cannot be dropped over the <div> with id="non-drop".
HTML
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#drag
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :aqua;
padding:10px;
}
#non-drop
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :orange;
padding:10px;
}
#drop
{
width: 150px;
height: 150px;
float: left;
margin: 10px;
background-color:yellow;
padding:10px;
}
</style>
<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();
$( "#non-drop" ).draggable();
$( "#drop" ).droppable(
{
accept:"#drag",
drop :function()
{
alert("I am dropped");
}
} );
} );
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
<p>Drag Me</p>
</div>
<div id="non-drop">
<p>Non droppable</p>
</div>
<div id="drop">
<p>Drop On Me</p>
</div>
</center>
</body>
</html>
Output:
Before Dropping
After Dropping
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more".
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing