jQuery UI Droppable

A DOM element can be made droppable at a specified target using the droppable() method of the JQuery UI.

Syntax:

The droppable () method can be used in either of its two acceptable forms:

  1. $(selector, context).droppable (options) Method
  2. $(selector, context).droppable (“action”, params) Method

First Method: The droppable (options) method:

To specify that an HTML element can be used as an element in which other elements can be dropped, the droppable (options) method is used where the behavior of the elements involved is defined by the options parameter.

Syntax:

$(selector, context).droppable (options);

Multiple options can be used at a time using a JavaScript object by separating them using a comma.

Syntax:

$(selector, context).droppable({option1: value1, option2: value2..... });

The popular options that can be used with this method are listed below:

Option Uses
accept To control which draggable elements are to be accepted for dropping. The default value is *.
activeclass To specify a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. The default value is false.
addclasses To restrict the ui-droppable class from being added to the droppable elements, when set to false. The default value is true.
diasabled To disable the droppable, when set to true. The default value is false.
greedy To control which draggable elements are to be accepted for dropping on nested droppables. Any parent droppables will not receive the element, when set to true. The default value is false.
hoverclass To specify a string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. The default value is false.
scope To restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). The default value is “default”.
tolerance To specify which mode to use for testing whether a draggable is hovering over a droppable. The default value is “intersect”.

Example 1:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style>  
         #drag-1 {   
           width: 50px; height: 50px; padding: 0.5em; float: left; background-color: crimson; color: white; border: 2px solid black; text-align:center;
 
         }  
         #drop-1 {   
            width: 50px; height: 50px; padding: 0.5em; float: left; background-color: gray; color: white; border: 2px solid black; text-align:center;
 
         }  
      </style>  
      <script>  
         $(function() {  
            $( "#drag-1" ).draggable();  
            $( "#drop-1" ).droppable();  
         });  
      </script>  
   </head>  
   <body>  
      <div id="drag-1" class="ui-widget-content">  
         <p>Hello</p>  
      </div>  
      <div id="drop-1" class="ui-widget-header">  
         <p>World!!</p>  
      </div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use of the jQuery UI Droppable() method. Here, we are passing no parameter.

Example 2:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>   
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style>  
         #drag-1 {   
           width: 90px; height: 90px; padding: 0.5em;   
           margin: 0px 5px 10px 0; background-color: crimson; color: white; border: 2px solid black; text-align:center;       
         }  
          #drop-1,#drop-2, #drop-3,#drop-4 {   
           width: 100px; height: 100px; padding: 0.5em; float: left; background-color: gray; color: white; border: 2px solid black; text-align:center; margin: 10px;   
         }  
 
      </style>  
      <script>  
         $(function() {  
            $( "#drag-1" ).draggable();  
            $( "#drop-1" ).droppable({  
            drop: function( event, ui ) {  
               $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Dropped!!" );  
            }  
         });  
         $( "#drop-2" ).droppable({  
            disabled : "true",  
            drop: function( event, ui ) {  
                $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Dropped!!" );  
            }  
         });  
         $( "#drop-3" ).droppable({  
            tolerance: 'touch',  
            drop: function( event, ui ) {  
            $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Dropped!!" );  
            }  
         });  
         $( "#drop-4" ).droppable({  
            tolerance: 'fit',  
            drop: function( event, ui ) {  
             $( this )  
            .addClass( "ui-state-highlight" )  
            .find( "p" )  
            .html( "Dropped!!" );  
            }  
        });  
      });  
   </script>  
</head>  
<body>  
   <div id="drag-1" class="ui-widget-content">  
      <p>Drag to the Target.</p>  
   </div>  
   <div id="drop-1" class="ui-widget-header">  
      <p>Target</p>  
   </div>  
   <div id="drop-2" class="ui-widget-header">  
      <p>Disabled</p>  
   </div>  
   <div id="drop-3" class="ui-widget-header">  
      <p>Drop to touch the boundary.</p>  
   </div>  
   <div id="drop-4" class="ui-widget-header">  
      <p>Drop within the box.</p>  
   </div>  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the way to use and the behavior of the addClass, disable and tolerance options in the drop function of the jQuery UI.

Example 3:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>   
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style>  
         .wrap{  
            display: table-row-group;  
         }  
         #class1A,#class2A, #class3A,#class4A {   
            width: 80px; height: 50px; padding: 0.5em; float: left; background-color: crimson; color: white; text-align: center; border: 2px solid black; margin: 5px;    
         }  
 
          #class1,#class2,#class3,#class4 {   
            width: 90px; height: 55px; padding: 0.5em; float: left; background-color: gray; color: white; text-align: center; border: 2px solid black; margin: 5px;    
         }  
 
   </style>  
   <script>  
      $(function() {  
         $( "#class1A" ).draggable();  
         $( "#class2A" ).draggable();  
 
         $( "#class1" ).droppable({  
            accept: "#class1A",  
            drop: function( event, ui ) {  
               $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Dropped!!" );  
            }  
         });  
         $( "#class2" ).droppable({  
            accept: "#class2A",  
            drop: function( event, ui ) {  
            $( this )  
            .addClass( "ui-state-highlight" )  
            .find( "p" )  
            .html( "Dropped!!" );  
            }  
         });  
 
         $( "#class3A" ).draggable({scope : "class3"});  
         $( "#class4A" ).draggable({scope : "class4"});  
         $( "#class3" ).droppable({  
            scope: "class3",  
            drop: function( event, ui ) {  
            $( this )  
            .addClass( "ui-state-highlight" )  
            .find( "p" )  
            .html( "Dropped!!" );  
            }  
         });  
         $( "#class4" ).droppable({  
            scope: "class4",  
            drop: function( event, ui ) {  
            $( this )  
            .addClass( "ui-state-highlight" )  
            .find( "p" )  
            .html( "Dropped!!" );  
            }  
         });   
      });  
   </script>  
</head>  
<body>  
   <div class="wrap" >  
   <div id="class1A" class="ui-widget-content">  
      <p>Students of <strong>Class 1A</strong></p>  
   </div>  
<div id="class2A" class="ui-widget-content">  
      <p>Students of <strong>Class 2A</strong></p>  
   </div><br>
 <div id="class1" class="ui-widget-header">  
      <p>Class 1A</p>  
   </div>  
<div id="class2" class="ui-widget-header">  
      <p>Class 2A</p>  
   </div>  
   </div>  
   <hr/>  
   <div class="wrap" >  
   <div id="class3A" class="ui-widget-content">  
      <p>Students of <strong>Class 3A</strong></p>  
   </div>  
   <div id="class4A" class="ui-widget-content">  
      <p>Students of <strong>Class 4A</strong></p>  
   </div><br>
   <div id="class3" class="ui-widget-header">  
      <p>Class 3A</p>  
   </div>  
 
   <div id="class4" class="ui-widget-header">  
      <p>Class 4A</p>  
   </div>  
   </div>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are displaying the way to use accept and scope options in the drag function of the jQuery UI. Drop the Students box to their respective classes to see the effect.

Example 4:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style type="text/css">  
         #drag-1 {   
           width: 80px; height: 80px; padding: 0.5em; float: left; margin: 5px; background: brown; color: white;
 
         }  
         #drop-1 {   
           width: 90px; height: 90px; padding: 0.5em; float: left;   
 
         }  
         .active {  
            border-color : black;  
            background : crimson;  
            }    
         .hover {  
            border-color : crimson;  
            background : gray;  
         }  
</style>  
   <script>  
      $(function() {  
         $( "#drag-1" ).draggable();  
         $( "#drop-1" ).droppable({  
            activeClass: "active",  
            hoverClass:  "hover",  
            drop: function( event, ui ) {  
               $( this )  
              .addClass( "ui-state-highlight" )  
              .find( "p" )  
              .html( "Dropped!" );  
            }  
         });  
      });  
   </script>  
</head>  
<body>  
 <div id="drag-1" class="ui-widget-content">  
      <p>Drag me to the Target!!</p>  
   </div>  
<div id="drop-1" class="ui-widget-header">  
      <p>Hover or Drop here!!</p>  
   </div>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying the effect of the activeClass and hoverClass options of jQuery UI. They are used to manage appearance. Hover on the target box and then drop to the target box to see the change in appearances.

Second Method: The droppable (“action”, params) method:

To act on droppable elements, such as preventing droppable functionality, the droppable (“action”, params) method is used. An action specified as a string is passed in the first argument. To prevent the drop, “disable” is passed as the first argument.

Syntax:

$(selector, context).droppable ("action", params);

The popular actions that can be used with this method are listed below:

Action Uses
accept To control which draggable elements are to be accepted for dropping. The default value is *.
activeclass To specify a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. The default value is false.
addclasses To restrict the ui-droppable class from being added to the droppable elements, when set to false. The default value is true.
disabled To disable the droppable, when set to true. The default value is false.
greedy To control which draggable elements are to be accepted for dropping on nested droppables. Any parent droppables will not receive the element, when set to true. The default value is false.
hoverclass To specify a string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. The default value is false.
scope To restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). The default value is “default”.
tolerence To specify a string to indicate the mode to use for testing whether a draggable is hovering over a droppable. The default value is “intersect”.

Example 5:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style>  
         .drag-1 {   
            width: 50px; height: 50px; padding: 0.5em; float: left;  
            margin: 5px;  
            border: 2px solid black;    
            background-color:crimson; color: white;
         }  
         .drop-1 {   
            width: 80px; height: 80px; padding: 0.5em; float: left;   
            margin: 10px;   
            border: 2px solid black;   
            background-color:gray; color: white; 
         }  
         .droppable.active {   
            background-color: red;   
         }  
      </style>  
      <script>  
         $(function() {  
            $('.drag-1').draggable({ revert: true });  
            $('.drop-1').droppable({  
               hoverClass: 'active',  
               drop: function(e, ui) {  
                  $(this).html(ui.draggable.remove().html());  
                  $(this).droppable('destroy');  
                  $( this )  
                  .addClass( "ui-state-highlight" )  
                  .find( "p" )  
                  .html( "Destroyed!!" );  
               }  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <div class="drag-1"><p>Drag Me</p></div>  
      <div class="drag-1"><p>Drag Me</p></div>  
      <div class="drag-1"><p>Drag Me</p></div>  
<div style="clear: both; padding:10px"></div>  
<div class="drop-1">Target 1</div>  
      <div class="drop-1">Target 2</div>  
      <div class="drop-1">Target 3</div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use of the destroy () method:

The popular event methods in jQueryUI are listed below. Each of these gets triggered for a particular event.

Event Method Uses
activate(event, ui) Triggered when the accepted draggable element starts dragging. It is used to make the droppable “light up” when it can be dropped on.
create(event,ui) Triggered when a droppable element is created, where “event” is of type event, and “ui” is of type object.
deactivate(event,ui) Triggered when an accepted draggable stops dragging, where “event” is of type event, and ui is of type object.
drop(event,ui) Triggered when an element is dropped on the droppable, based on the tolerance option, where “event” is of type event, and “ui” is of type object.
out(event,ui) Triggered when an accepted draggable element is dragged out of the droppable based on the tolerance option, where “event” is of type event, and “ui” is of type object.
over(event,ui) Triggered when an accepted draggable element is dragged over the droppable based on the tolerance option, where “event” is of type event, and “ui” is of type object.

Example 6:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Droppable - Default functionality</title>    
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <style>  
         #drag-1 {   
            width: 50px; height: 50px; padding: 0.5em; float: left;  
            margin: 5px; background-color: crimson; color: white; text-align:center; border: 2px solid black;   
         }  
         #drop-1 {      
           width: 100px; height: 100px; padding: 0.5em; float: left;   
           margin: 10px; background-color: gray; color: white; text-align:center; border: 2px solid black;   
         }  
      </style>  
      <script>  
         $(function() {  
            $( "#drag-1" ).draggable();  
            $("#drop-1").droppable({  
               drop: function (event, ui) {  
               $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Dropped!!" );  
               },     
               over: function (event, ui) {  
               $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Moving In!" );  
               },  
               out: function (event, ui) {  
               $( this )  
               .addClass( "ui-state-highlight" )  
               .find( "p" )  
               .html( "Moving Out!" );  
               }        
            });  
         });  
      </script>  
   </head>  
   <body>  
<div id="drag-1" class="ui-widget-content">  
      <p>Drag Me</p>  
   </div>  
<div id="drop-1" class="ui-widget-header">  
      <p>Target</p>  
   </div>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Output 4:

Explanation:

In the above example, we are displaying the use and behavior of the “drop”, “over” and “out” events during drop functionality.

Please Share