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:

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>

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

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