Drag and Drop Example using jQuery JavaScript in HTML

jquery-thumbEver 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.



12 Comments

  • Robert 22 January, 2010, 10:56

    I tried that and get an error:
    “draggable is not a function”

    I use jQuery 1.3.2

  • Ryan 16 February, 2010, 21:25

    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

    • Rohit Dandamudi 8 May, 2012, 14:17

      i am able to drag an item from parent jsp table to child jsp table. When the page got refreshed that the data which was dragged has lost. I need to save the dragged item in child jsp. Please help to me solve this.

      Thanks in advance,
      Rohit

  • Mitzi 23 March, 2010, 3:22

    Hello there,

    First of all thanks for the tutorial. Is awesome and really simple to apply.

    I am trying to use your draggable tutorial as well as the jquery.scrollTo.js. I really don’t know much about jQuery or Javascript. My idea is to make a wrapper for my website and add each page as a div. Then make this wrapper draggable, that way my users will drag the whole website to navigate through the site. But I want to make the navigation more friendly, I don’t want my users get all freaked out. So I also will add a menu to scroll to each page, for those users who wish to navigate using the menu instead of dragging. The pages are not just positioned vertically one on top of another, some are next to each other some are under , so when I use the scrollTo function the site scrolls diagonally, horizontally and vertically as well depending on the page they are going to.

    I really hope all of this is making sense to you. My problem is this….

    I already made the two scripts work together but I have one little problem. Sometimes after dragging the website around, when I try to go back to my page 1 (using the menu to scroll to it) it’s position is off. It is not center in my browser window anymore. Any thoughts that can help?

    Here is a link to my test…
    http://www.sprocketproductions.com/fxtests/scroll/

  • Alex_D 29 April, 2010, 4:06

    Hello!
    I searched many forums but I couldn’t find a solution to my problem.
    I’m working on a webpage and I’ve implemented a javascript drag & drop section.
    It’s working fine in Mozilla Firefox, but I’m having a little problem in Internet Explorer.
    Inside each draggable element, which are div elements, I have other div elements.
    I want to add a javascript onclick function to one of theese div’s. but I can’t make it work in IE.
    Could someone help me with that?
    Here is a part of my code:

    …..
    foreach( $this->channelsList as $channel){
    ?>
    <div id="channel” style=”height:50px;” class=”list”>
    <input value="id?>” type=”hidden” name=”channel[]“/>

     

    <img height="45" src="baseUrl()?>/img/channel_logos/id, 0, -8)?>.png” alt=”name?>” />

    <div class="list-delete" onclick="delete_div('channel’)”><img alt="delete" src="baseUrl()?>/img/delete.png” />

    <?
    $i++;
    }
    ….

    Thanks

  • Daniel Gabriele 23 May, 2010, 6:22

    I honestly don’t think this is too tough to do manually. I’ve been playing with javascript and jquery for a few weeks and the logic needed to accomplish this is straight-forward: find the change in x and change in y between each “mousemove” event.

    http://plaza.ufl.edu/publius/experiments/manipulables/drag-0.html

  • Aman 13 August, 2010, 18:29

    hi
    i like you plugin. i have also some jquery drag and drop plugins.please see:-

    http://jquery13.blogspot.com/2010/08/30-drag-and-drop-jquery-plugins.html

    Thanks
    Aman

  • C. Nelson 24 August, 2010, 2:13

    Where does the code in the ‘code snippet’ section go? So far, this doesn’t work.

  • justin 15 December, 2010, 17:45

    Daniel,
    The problem doing it manually is you have to disable some functions first. A lot of browsers have their own drag and drop function on certain types of elements. So you either have to disable that or make a transparent div higher on the z axis and have that move the below element. It is not super hard, but it is not as straight forward as you would think or it should be.

  • Raju 20 June, 2011, 16:47

    This is nice but not working in IE. When we dragging the div in the iframe down this is working fine when i want to move this div again up then the div is dissapearing from the iframe. this behaviour is happening in IE.

  • Megha 21 October, 2011, 0:21

    Hi,
    I am trying to drag an item and drop it to some other element. And then when the item is dropped I want the server to handle an event.I am trying to use your droppable fucntion but it doesnt work. Code I m using is:

        
        
    $(“#draggable”).draggable();
    $(“#droppable”).droppable ({
    drop: function() { alert(‘dropped’); }
    });

          
        
        $(document).ready(function(){
            $(“#move”).draggable();
        });
        

     
        
        $(document).ready(function(){
            $(“#move1″).droppable();
        });
         

  • sheelpriy 6 February, 2014, 15:16

    i want to make a div drag-able but a constraint of containment. like it should never get out of its parent div but should be drag-able within that parent div only

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *