Drag and Drop Example using jQuery JavaScript in HTML
- By Viral Patel on May 6, 2009
- JQuery, Tutorial
Ever tried implementing Drag & Drop feature using JavaScript? Believe me it is quite tough and has lots of cross browser implementation issues. Using jQuery you can create simple Drag & Drop features easily and manage them well. jQuery UI provides with a vast suite of APIs that can be leveraged to create a UI with Drag Drop functionality.
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.
Enough of talking. Lets see the real code:
Include jQuery
First include the jQuery library in your code where you want to add drag/drop functionality.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
Code Snippet
$("#draggable").draggable();
$("#droppable").droppable ({
drop: function() { alert('dropped'); }
});
The full code for following demo will looks like:
<HTML>
<HEAD>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</HEAD>
<BODY>
<DIV id="move" style="width:150px;height:150px;background-color:pink;border:1px solid #999999"> </DIV>
<SCRIPT>
$(document).ready(function(){
$("#move").draggable();
});
</SCRIPT>
</BODY>
</HTML>
Online Demo
Drag the following pink box.
Demo
$(“#draggable”).draggable();
The above code makes an element with ID draggable, draggable. So that means you don’t have to write cross browser javascript to do these things.
Also note that we have called a function .droppable which makes an item to react when you drop any draggable item on it.
Callback functions
We can provide different callback functions which gets called on different events such as start, stop, drag. These callback functions has two arguements, first is the browser event object and second is the ui object that represents:
* ui.helper – the jQuery object representing the helper that’s being dragged
* ui.position – current position of the helper as { top, left } object, relative to the offset element
* ui.offset – current absolute position of the helper as { top, left } object, relative to page
Refer jQuery UI website for more information on Draggables/Droppables.
Get our Articles via Email. Enter your email address.
I tried that and get an error:
“draggable is not a function”
I use jQuery 1.3.2
You need to include the jquery ui library in your document’s head, and you need to make sure it contains the draggable and droppable components for this example to work