• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQueryUI Droppable Widget Example

November 8, 2014 //  by Krishna Srinivasan//  Leave a Comment

The jQueryUI Droppable plugin triggers when an accepted draggable is dropped ‘over’ this droppable. The interaction of droppable depends on draggable element. In general we can say that, target region for draggable element is droppable. We can create target on the page for dropping draggable elements.

also read:

  • JQuery Keydown, Keypress and Keyup
  • JQUery Setting Drop Down Value
  • JQuery prepend() and prependTo()

The droppable widget can be used in two forms:

  • $(selector, context).droppable (options)
  • $(selector, context).droppable (“action”, params)

The following is a simple example of droppable widget:

<!DOCTYPE html>
<head>
<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">
	#dragMe {
		   width: 150px;
		   height: 150px;
		   padding:0.5em;
		   background:gray;
		   float:left;
		   text-align:center;
		   margin:10px;
	}
	#dropMe
	{
		  width: 150px;
	 	  height:150px;
		  padding:0.5em;
		  background:orange;
		  float:left;
		  text-align:center;
		  margin:10px;
	}
</style>
<script>
	 $(function() {
		$( "#dragMe" ).draggable();
		$( "#dropMe" ).droppable();
	 });
  </script>
</head>
<body>
  <div id="dragMe">
	 <p>Drag Me</p>
  </div>
  <div id="dropMe">
	 <p>Drop Here</p>
  </div>
</body>
</html>

Run JQueryUI Simple Droppable Demo

JQueryUI Simple Droppable Example

Droppable Widget Options

The droppable widget contains following options:

Option Description Default Value
accept It specifies which draggable elements accepted for the droppable region. *
activeClass It specifies the CSS style for the droppable, when an accepted element is being dragged. false
addClasses The ui-droppable class could be prevent from being added, when it is set to false. true
disabled It indicates droppable element can be disable by setting it to true. false
greedy It will prevent event propagation on nested droppables as element is dropped when it is set to true. false
hoverClass It specifies one or more CSS styles will be added to droppable element, while element is being hovered on droppable region. false
scope It groups the sets of draggable and droppable elements to the items which have the same options. scope i.e. the draggable value can be accepted as droppable value. default
tolerance It is used for testing whether draggable is hovering over a droppable. intersect

The following is an example:

<!DOCTYPE html>
<head>
<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">
	   #dragMe
		{
			   width: 150px;
			   height: 150px;
			   padding:0.5em;
			   background:brown;
			   float:left;
			   text-align:center;
			   margin:10px;
		}
       #dropMe
	   	{
	   		  width: 150px;
	   		  height:150px;
	   		  padding:0.5em;
	   		  float:left;
	   		  text-align:center;
	   		  margin:10px;
	   }
	   .active
	   {
			 border-color : cyan;
			 background :#F781D8;
		}
	  .hover
	  {
			border-color : red;
			background : #00FF80;
	  }
</style>
<script>
      $(function() {
         $( "#dragMe" ).draggable();
         $( "#dropMe" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            greedy: true,
            accept: '#dragMe',
		     tolerance: 'touch',
		     drop: function(){
			alert('Element is dropped!!!');
		     }
         });
      });
</script>
</head>
<body>
   <div id="dragMe" class="ui-widget-content">
      <p>Drag me </p>
   </div>
   <div id="dropMe" class="ui-widget-header">
      <p>Drop here</p>
   </div>
</body>
</html>
  • The above example uses some of the options such as activeClass, hoverClass, accept and tolerance.
  • When we run the script, if we drag the element over a droppable element, the background color and border color of the droppable element will get change when mouse hovered over the droppable.
  • We are using CSS styles to make more effective result on the webpage; we are using ID selectors for drag and drop elements and class selectors for hover and active options.
  • The greedy option will receive the element, when an element is dropped on droppable element.

Run JQueryUI Droppable Options Demo

JQueryUI Droppable Options Example

Droppable Widget Methods

The following table shows some of the methods which are used with droppable widget:

Method Description
destroy() It removes the droppable functionality .
disable() This method disables the drop action.
enable() This method enables the drop action.
instance() It creates the droppable instance object.
options() It returns the options property. It sets droppable option with specified option name.
widget() It defines droppable element object.

The following example demonstrates usage of methods:

<!DOCTYPE html>
<head>
<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>
 .dragMe
 {
	 padding: 40px 25px;
	 border: 1px solid blue;
	 float: left;
	  margin:10px;
 }
 .dropMe
 {
     padding: 40px 25px;
	 border: 1px solid green;
	 float: left;
	 margin:10px;
 }
</style>
</head>
<body>
   <div class="dragMe">Drag1</div>
   <div class="dragMe">Drag2</div>
   <div class="dragMe">Drag3</div>
   <div style="clear: both;"></div>
   <div class="dropMe">Drop Here</div>
   <div class="dropMe">Drop Here</div>
   <div class="dropMe">Drop Here</div>
<script>
   $(function() {
	   $('.dragMe').draggable({ revert: true });
	   $('.dropMe').droppable({
	       hoverClass: 'active',
	       drop: function(e, ui) {
	           $(this).html(ui.draggable.remove().html());
	           $(this).droppable('destroy');
	       }
        });
    });
</script>
</body>
</html>
  • The above example makes use of method destroy which remove the droppable functionality and return the element back to its pre-init state.
  • The CSS styles are used to make more effective the result should be displayed on the web page.

Run JQueryUI Droppable Methods Demo

JQueryUI Droppable Methods Example

Droppable Widget Events

The following table shows events which are used with droppable widget:

Event Description
activate(event, ui) This event fires when the acceptable element starts dragging.
create(event, ui) It fires when a droppable element is created.
deactivate(event, ui) It fires when a draggable element stops dragging.
drop(event, ui) It fires when the draggable element is dropped on the droppable.
out(event, ui) It fires when draggable element is dragged out of the droppable.
over(event, ui) It fires when draggable element is dragged over the droppable.

The following example demonstrates usage of events:

<!DOCTYPE html>
<head>
<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>
   #dragMe
   {
	   width: 150px;
	   height: 150px;
	   padding:0.5em;
	   background:brown;
	   float:left;
	   text-align:center;
	   margin:10px;
   }
   #dropMe
   {
	  width: 150px;
	  height:150px;
	  padding:0.5em;
	  float:left;
	  text-align:center;
	  margin:10px;
   }
</style>
</head>
<body>
   <div id="dragMe" class="ui-widget-content">
      <p>Drag me </p>
   </div>
   <div id="dropMe" class="ui-widget-header">
      <p>Drop here</p>
   </div>
   <div id="info" style="color:red;"></div>
<script>
$(function(){
   $("#dragMe").draggable();
   $("#dropMe").droppable({
      drop:function(event, ui){
         $("#info").html("dropped the element!!!");
      },
      over: function(event, ui){
         $("#info").html("moving in the element!!!");
      },
      out: function(event, ui){
         $("#info").html("moving out from the element!!!");
      }
   });
});
</script>
</body>
</html>
  • The script uses events such as drop which activate when element is dropped on the element.
  • The out event indicates that dragged element is dragged out of the droppable.
  • The over event indicates that dragged element is dragged over the droppable.

Run JQueryUI Droppable Events Demo

JQueryUI Droppable Events Example

Category: jQueryTag: jQuery UI

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « JQueryUI Resizable Widget
Next Post: JqueryUI Accordion Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact