jQuery UI Droppable

jQuery UI facilitates you to use droppable() method to make any DOM element droppable at a specified target.

Syntax:

You can use the droppable () method in two forms:

First Method

The droppable (options) method specifies that you can use an HTML element as an element in which you can drop other elements. Here, the option parameter specifies the behavior of the elements involved.

Syntax:

You can use one or more options at a time using JavaScript object. If you are using more than one option then will have to separate them by using a comma. For example:

Following is a list of the different options that can be used with this method:

Option	Description
accept	This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclass	This option is 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. by default its value is false.
addclasses	This option when set to false will prevent the ui-droppable class from being added to the droppable elements. by default its value is true.
diasabled	This option when set to true disables the droppable. by default its value is false.
greedy	This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclass	This option is 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. by default its value is false.
scope	This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default".
tolerence	This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is "intersect".

jQuery UI Droppable() method example 1

Let's take an example to demonstrate the jQuery UI Droppable() method with no parameter.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-1 { 
           width: 100px; height: 100px; padding: 0.5em; float: left;
           margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 150px; height: 120px;padding: 0.5em; float: left; 
           margin: 10px; 	
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   <body>
      <div id="draggable-1" class="ui-widget-content">
         <p>I am SSSIT.org<br/> Drag me to trainingtrains</p>
      </div>
      <div id="droppable-1" class="ui-widget-header">
         <p>Welcome to trainingtrains</p>
      </div>
   </body>
</html>

Test it Now

jQuery UI Droppable() method example 2

b) How to use addClass, disabled and tolerance:

Following example specifies how to use these three options addClass, disable and tolerance in the drop function of jQuery UI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-2 { 
           width: 100px; height: 50px; padding: 0.5em; 
           margin: 0px 5px 10px 0; 	    
         }
          #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px; 
         }
         
      </style>
      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#droppable-3" ).droppable({
            disabled : "true",
            drop: function( event, ui ) {
                $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#droppable-4" ).droppable({
            tolerance: 'touch',
            drop: function( event, ui ) {
            $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped with a touch!" );
            }
         });
         $( "#droppable-5" ).droppable({
            tolerance: 'fit',
            drop: function( event, ui ) {
             $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped only when fully fit on the me!" );
            }
        });
      });
   </script>
</head>
<body>
   <div id="draggable-2" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
   <div id="droppable-2" class="ui-widget-header">
      <p>Drop here</p>
   </div>
   <div id="droppable-3" class="ui-widget-header">
      <p>I'm disabled, you can't drop here!</p>
   </div>
   <div id="droppable-4" class="ui-widget-header">
      <p>Tolerance Touch!<br/> Drop to touch the boundary.</p>
   </div>
   <div id="droppable-5" class="ui-widget-header">
      <p>Tolerance Fit!<br/> Drop within the box.</p>
   </div>
</body>
</html>

Test it Now

jQuery UI Droppable() method example 3

c) How to select elements to be dropped:

The following example specifies how to use accept and scope options in the drag function of jQuery UI:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .wrap{
            display: table-row-group;
         }
         #sqltutorial,#htmltutorial, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
          #sql,#html,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
         
   </style>
   <script>
      $(function() {
         $( "#sqltutorial" ).draggable();
         $( "#htmltutorial" ).draggable();

         $( "#sql" ).droppable({
            accept: "#sqltutorial",
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#html" ).droppable({
            accept: "#htmltutorial",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         });

         $( "#javatutorial" ).draggable({scope : "java"});
         $( "#springtutorial" ).draggable({scope : "spring"});
         $( "#java" ).droppable({
            scope: "java",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         });
         $( "#spring" ).droppable({
            scope: "spring",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         }); 
      });
   </script>
</head>
<body>
   <div class="wrap" >
   <div id="sqltutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>SQL</strong></p>
   </div>
<div id="htmltutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>HTML</strong></p>
   </div>
 <div id="sql" class="ui-widget-header">
      <p>SQL</p>
   </div>
<div id="html" class="ui-widget-header">
      <p>HTML</p>
   </div>
   </div>
   <hr/>
   <div class="wrap" >
   <div id="javatutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>Java</strong></p>
   </div>
   <div id="springtutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>Spring</strong></p>
   </div>
   <div id="java" class="ui-widget-header">
      <p>Java</p>
   </div>

   <div id="spring" class="ui-widget-header">
      <p>Spring</p>
   </div>
   </div>
</body>
</html>

Test it Now

jQuery UI Droppable() method example 4

d) How to use activeClass and hoverClass :

activeClass and hoverClass options of jQuery UI are used to manage appearance. Let?s take an example to demonstrate this effect:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         #draggable-3 { 
           width: 100px; height: 50px; padding: 0.5em; float: left;
           margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px; 
         }
         .active {
            border-color : red;
            background : pink;
            }  
         .hover {
            border-color : black;
            background : lightgreen;
         }
</style>
   <script>
      $(function() {
         $( "#draggable-3" ).draggable();
         $( "#droppable-6" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            drop: function( event, ui ) {
               $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
            }
         });
      });
   </script>
</head>
<body>
 <div id="draggable-3" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
<div id="droppable-6" class="ui-widget-header">
      <p>Hover at me or Drop here</p>
   </div>
</body>
</html>

Test it Now

Second Method

The droppable ("action", params) method is used to perform an action on droppable elements, like preventing droppable functionality. You have to pass an action specified as a string in the first argument. i.e. "disable" to prevent the drop.

Syntax:

Following is the list of actions that can be used with this method:

Action	Description
accept	This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclass	This option is 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. by default its value is false.
addclasses	This option will prevent the ui-droppable class from being added to the droppable elements,when set to false.by default its value is true.
disabled	This option disables the droppable,when set to true. by default its value is false.
greedy	This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclass	This option is 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. by default its value is false.
scope	This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default".
tolerence	This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. by default its value is "intersect".

jQuery UI Droppable() method example 5

Let's take an example to demonstrate the use of destroy () method:

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

Test it Now

There are some event methods in jQueryUI which get triggered for a particular event. Following are some event methods.

Event Method	Description
activate(event, ui)	This event is triggered when the accepted draggable element starts dragging. this can be useful if you want to make the droppable "light up" when it can be dropped on.
create(event,ui)	This event is triggered when a droppable element is created. ?where? event is of type event, and "ui" is of type object.
deactivate(event,ui)	This event is triggered when an accepted draggable stops dragging. "Where" event is of type event, and ui is of type object.
drop(event,ui)	This action is triggered when an element is dropped on the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object.
out(event,ui)	This event is triggered when an accepted draggable element is dragged out of the droppable. this is based on the tolerance option. ?Where? event is of type event, and "ui" is of type object.
over(event,ui)	This event is triggered when an accepted draggable element is dragged over the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object.

jQuery UI Droppable() method example 6

Let's take an example to demonstrate the "drop", "over" and "out" events during drop functionality.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px;
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").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="draggable-5" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
<div id="droppable-8" class="ui-widget-header">
      <p>I am the target. </p>
   </div>
</body>
</html>

Test it Now

Next TopicjQuery UI Resizable

← prev next →