Published on: 02 June, 2013

Jquery drag and drop example

Tumblr Digg Google Plus

In this tutorial you will learn how to create Drag and Drop in JQuery. You will see how the quick demo of drag and drop works below. Further reading, you will find quick tutorial with code comments to explain how everything works.

Quick Demo

You will be able to see the quick demo in here:

MOVABLE BOX
 
 

 

Before starting the tutorial, you will need to import the required javascripts as below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
Note: You can save the scripts on your local server if you prefer, by copying the links and paste them to your browser.

Next let's see the html code.

<div id="boxdemo">
	<div class="draggable">
		MOVABLE BOX
	</div>

	<div class="droppable"></div>
	<div class="clear"></div>
</div>

This will be the CSS Stylesheet

/** This is the wrapper box that the drag and drop box is not allowed to pass outside of this box.**/
#boxdemo{
	width:400px;
	height:200px;
	position:relative;
	padding:10px;
	border:solid 1px blue;
}

/** style for droppable content **/
.droppable { 
	width: 150px; 
	height: 100px;
	float: left; 
	border:solid 1px gray;
	margin-left:150px;
}

/** style for draggable content **/
.draggable{ 
	background-color:#d9de48;		
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	font-size:12px;
	font-weight:bold;
	width:75px;
	height:75px;
	float: left; 
}

/** style when an object is moving hover **/
.hoverClass{
	background:#339bfb;
	color:#ffffff;
}

/** style for droppable when the moveable object is dropped **/
.dropClass{
	background:#55d532;
}

/** clear the float used by other draggable and moveable objects **/
.clear{
	clear:both;
}

This will be the jquery and javascript function.

$(function() {
        /** we set the draggable class to be draggable, we add the containment which will be #boxdemo, so dropable and draggable object cant pass out of this box **/
	$( ".draggable" ).draggable({ 
		containment:"#boxdemo",
		revert: "invalid"
	});

	$( ".droppable" ).droppable({
        /** tolerance:fit means, the moveable object has to be inside the dropable object area **/
		tolerance: 'fit',
		over: function(event, ui) {
            /** We add the hoverClass when the moveable object is inside of the dropable object **/
			$('.ui-draggable-dragging').addClass('hoverClass');
		},
		out: function(event, ui) {
            /** We remove the hoverClass when the moveable object is outside of the dropable object area **/
			$('.ui-draggable-dragging').removeClass('hoverClass');
		},
        /** This is the drop event, when the draggable object is moved on the top of the dropable object area **/
		drop: function( event, ui ) {
			$( ".droppable" ).addClass('dropClass');
		}
	});
});

Attribute Properties Explanation

Name Explanation
revert When the value is set to true, the element will return to its start position when the drag process stops. There are two possible string values which are 'valid' or 'invalid'. If the value is set to invalid, revert will only occur if the draggable has not been dropped on a droppable. While for the valid value, it will perform the other way around.
tolerance Those are the values of tolerance: 'fit', 'intersect', 'pointer', 'touch'.
  • fit: draggable overlaps the droppable entirely
  • intersect: draggable overlaps the droppable at least 50%
  • pointer: mouse pointer overlaps the droppable
  • touch: draggable overlaps the droppable any amount

If you want to see the quick demo on how drag and drop works using JQuery, please click this link.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.