Drag and Drop Example using jQuery JavaScript in HTML

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 language: JavaScript (javascript)

Code Snippet

$("#draggable").draggable(); $("#droppable").droppable ({ drop: function() { alert('dropped'); } });
Code language: JavaScript (javascript)
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>
Code language: HTML, XML (xml)

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.

View Comments

  • 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

    • 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

  • 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/

  • 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" >

    <?
    $i++;
    }
    ....

    Thanks

  • 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.

  • 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.

  • 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();
        });
         

Share
Published by
Viral Patel
Tags: drag and drop drag drop tutorial JavaScript JQuery jquery drag drop jquery ui tutorial

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago