jQuery UI | draggable() and droppable() methods

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
</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>                                           

chevron_right


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 dropppable property of the DOM element.If the value of this option is set to ture , 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
<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>                    

chevron_right


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”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
<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>                    

chevron_right


Output:
Before Dropping

After Dropping



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet