jQuery UI | draggable() and droppable() methods - GeeksforGeeks

27 Oct, 2021
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.  
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: 
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  
 
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:  
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.
 
nidhi_biet
surinderdawra388
simmytarika5
jQuery-Basics
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?