How to implement a drag-and-drop div from scratch with JavaScript?

javascript drag and drop example
drag and drop javascript demo
html5 drag and drop multiple elements
jquery drag and drop multiple div example
draggable div javascript
javascript drag and drop list
html5 drag and drop ghost image opacity
drag and drop game javascript

It should be a combination of CSS and JavaScript. The steps to do should be:

  1. Make it on top of all other elements (which property to specify?)
  2. Catch the event when it is clicked (which event to listen to?)
  3. Move the div as mouse moves.

But what are the details?

The jQuery Way:

Check out the jQueryUI addons draggable and droppable.

Literally hundreds of hours have been invested into the jQuery framework to make complicated tasks like this almost trivial. Take advantage of the jQuery team's efforts to make programming rich cross-browser applications easier on us all ;)

Chuck Norris' Way:

If you insist on trying this with raw javascript. You'll want to do a few things. One, programmatically set all draggable items to a relative/absolute positioning. If you click a particular item, cause it's top/left values in CSS to reflect the changes made by the x,y axis of the mouse until the click is released. Additionally, you'll want to update the z-index of each draggable when it's clicked to bring it into view.

Tutorial: How to Drag and Drop with Javascript

How To Create Drag and Drop Elements with Vanilla JavaScript and , Step 2 — Handling Drag-and-Drop Events with JavaScript. Currently, if we release the mouse while dragging the draggable element, nothing� It might seem complicated, but lets go through all the different parts of a drag and drop event. Make an Element Draggable First of all: To make an element draggable, set the draggable attribute to true:

  1. make it absolute positioned, with a high z-index.
  2. check for onmousedown of the div.
  3. use the event's mouseX and mouseY attributes to move the div.

Here's an example from Javascript, the Definitive Guide (updated here):

/**
 *  Drag.js:    drag absolutely positioned HTML elements.
 *
 *  This module defines a single drag() function that is designed to be called
 *  from an onmousedown event handler. Subsequent mousemove event will
 *  move the specified element. A mouseup event will terminate the drag.
 *  If the element is dragged off the screen, the window does not scroll.
 *  This implementation works with both the DOM Level 2 event model and the
 *  IE event model.
 *
 *  Arguments:
 *
 *      elementToDrag: the element that received the mousedown event or
 *          some containing element. It must be absolutely positioned. Its
 *          style.left and style.top values will be changed based on the user's
 *          drag.
 *
 *      event: ethe Event object for the mousedown event.
 *
 *  Example of how this can be used:
 *      <script src="Drag.js"></script> <!-- Include the Drag.js script -->
 *      <!-- Define the element to be dragged -->
 *      <div style="postion:absolute; left:100px; top:100px; width:250px;
 *                  background-color: white; border: solid black;">
 *      <!-- Define the "handler" to drag it with. Note the onmousedown attribute. -->
 *      <div style="background-color: gray; border-bottom: dotted black;
 *                  padding: 3px; font-family: sans-serif; font-weight: bold;"
 *          onmousedown="drag(this.parentNode, event);">
 *      Drag Me <!-- The content of the "titlebar" -->
 *      </div>
 *      <!-- Content of the draggable element -->
 *      <p>This is a test. Testing, testing, testing.<p>This is a test.<p>Test.
 *      </div>
 *
 *  Author: David Flanagan; Javascript: The Definitive Guide (O'Reilly)
 *  Page: 422
 **/
 function drag(elementToDrag, event)
 {
     // The mouse position (in window coordinates)
     // at which the drag begins
     var startX = event.clientX, startY = event.clientY;

     // The original position (in document coordinates) of the
     // element that is going to be dragged. Since elementToDrag is
     // absolutely positioned, we assume that its offsetParent is the
     //document bodt.
     var origX = elementToDrag.offsetLeft , origY = elementToDrag.offsetTop;

     // Even though the coordinates are computed in different
     // coordinate systems, we can still compute the difference between them
     // and use it in the moveHandler() function. This works because
     // the scrollbar positoin never changes during the drag.
     var deltaX = startX - origX, deltaY = startY - origY;

     // Register the event handlers that will respond to the mousemove events
     // and the mouseup event that follow this mousedown event.
     if (document.addEventListener) //DOM Level 2 event model
     {
         // Register capturing event handlers
         document.addEventListener("mousemove", moveHandler, true);
         document.addEventListener("mouseup", upHandler, true);
     }
     else if (document.attachEvent) //IE 5+ Event Model
     {
         //In the IE event model, we capture events by calling
         //setCapture() on the element to capture them.
         elementToDrag.setCapture();
         elementToDrag.attachEvent("onmousemove", moveHandler);
         elementToDrag.attachEvent("onmouseup", upHandler);
         // Treat loss of mouse capture as a mouseup event.
         elementToDrag.attachEvent("onclosecapture", upHandler);
     }
     else //IE 4 Event Model
     {
         // In IE 4, we can't use attachEvent() or setCapture(), so we set
         // event handlers directly on the document object and hope that the
         // mouse event we need will bubble up.
         var oldmovehandler = document.onmousemove; //used by upHandler()
         var olduphandler = document.onmouseup;
         document.onmousemove = moveHandler;
         document.onmouseup = upHandler;
     }

     // We've handled this event. Don't let anybody else see it.
     if (event.stopPropagation) event.stopPropagation();    //  DOM Level 2
     else event.cancelBubble = true;                        //  IE

     // Now prevent any default action.
     if (event.preventDefault) event.preventDefault();      //  DOM Level 2
     else event.returnValue = false;                        //  IE

     /**
      * This is the handler that captures mousemove events when an element
      * is being dragged. It is responsible for moving the element.
      **/
      function moveHandler(e)
      {
          if (!e) e = window.event; //  IE Event Model

          // Move the element to the current mouse position, adjusted as
          // necessary by the offset of the initial mouse-click.
          elementToDrag.style.left = (e.clientX - deltaX) + "px";
          elementToDrag.style.top = (e.clientY - deltaY) + "px";

          // And don't let anyone else see this event.
          if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
          else e.cancelBubble = true;                       // IE
      }

      /**
       * This is the handler that captures the final mouseup event that
       * occurs at the end of a drag.
       **/
       function upHandler(e)
       {
           if (!e) e = window.event;    //IE Event Model

           // Unregister the capturing event handlers.
           if (document.removeEventListener) // DOM event model
            {
                document.removeEventListener("mouseup", upHandler, true);
                document.removeEventListener("mousemove", moveHandler, true);
            }
            else if (document.detachEvent)  //  IE 5+ Event Model
            {
                elementToDrag.detachEvent("onlosecapture", upHandler);
                elementToDrag.detachEvent("onmouseup", upHandler);
                elementToDrag.detachEvent("onmousemove", moveHandler);
                elementToDrag.releaseCapture();
            }
            else    //IE 4 Event Model
            {
                //Restore the original handlers, if any
                document.onmouseup = olduphandler;
                document.onmousemove = oldmovehandler;
            }

            //  And don't let the event propagate any further.
            if (e.stopPropagation) e.stopPropagation(); //DOM Level 2
            else e.cancelBubble = true;                 //IE
       }
 }

 function closeMe(elementToClose)
 {
     elementToClose.innerHTML = '';
     elementToClose.style.display = 'none';
 }

 function minimizeMe(elementToMin, maxElement)
 {
     elementToMin.style.display = 'none';
 }

HTML Drag and Drop API, how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. In HTML, any element can be dragged and dropped. Drag and drop is a very common feature. The example below is a simple drag and drop example :� In the modern HTML standard there’s a section about Drag and Drop with special events such as dragstart, dragend, and so on. These events allow us to support special kinds of drag’n’drop, such as handling dragging a file from OS file-manager and dropping it into the browser window. Then JavaScript can access the contents of such files.

HTML5 Drag and Drop

If you are reading this in the year 2017 or later, you might want to have a look at the HTML5 Drag and Drop API:

https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API

Example:

<!DOCTYPE HTML>
<html>
<head>
    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <style>
        .draggable {
            border: 1px solid black;
            width: 30px;
            height: 20px;
            float: left;
            margin-right: 5px;
        }
        #target {
            border: 1px solid black;
            width: 150px;
            height: 100px;
            padding: 5px;
        }
    </style>
</head>
<body>

    <h1>Drag and Drop</h1>

    <h2>Target</h2>
    <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <h2>Draggable Elements</h2>
    <div id="draggable1" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable2" class="draggable" draggable="true" ondragstart="drag(event)"></div>
    <div id="draggable3" class="draggable" draggable="true" ondragstart="drag(event)"></div>

</body>
</html>

Using the HTML5 Drag and Drop API, The HTML5 Drag and Drop (DnD) API means that we can make almost any element on our page Here's the CSS for my container and box elements. At this point you will find that you can drag the items, however nothing else will happen. To add the DnD functionality we need to use the JavaScript API. In this tutorial, we will build a drag-and-drop example using the HTML Drag and Drop API with vanilla JavaScript to use the event handlers. Prerequisites. To complete this tutorial, you will need: A modern web browser that supports the Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+). Step 1 — Creating the Project and

Drag'n'Drop with mouse events, So here we'll see how to implement Drag'n'Drop using mouse events. On mousedown – prepare the element for moving, if needed (maybe On the beginning of the drag'n'drop, the ball “forks”: we start dragging its “clone”. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Yeah, you can use jQuery if you want a bloated library with far more functions than you need! Or if you want to be more of an elitist, use Waltern Zorn's drag and drop library, which is one tenth of the size.

Draggable JS – JavaScript drag and drop library, Swappable. The classic switcheroo. Drag one element over another and watch them trade places in the DOM. The ideal functionality for when layout dimensions � How to drag and drop an object from one Div to another div using pure JavaScript? Yes. We can use HTML5’s power to drag and drop any object from one div to another using only JavaScript no other library like jQuery so that our webpage will get too heavy. What you need? 1 HTML page; 1 image; so lets start with basic.

How to Create Native Drag and Drop Functionality in JavaScript , Create an index.html file at your project's root folder and add the following: div> </main> <script src="drag-n-drop.js"></script> index.html. First, we'll create a basic React component called ToDoDragDropDemo which will be our component that will implement the drag-and-drop feature. We'll define the render method which, for now, will just return a div and a child header. This would be the basic boilerplate code for our application:

Create a Draggable Element in JavaScript, Learn how to easily drag an element around using either the mouse or <title> Drag/Drop/Bounce</title> <style> #container { width: 100%;�

Beginner Drag-and-Drop Game with HTML, SCSS and JS, This short tutorial will teach you how to build a simple drag-and-drop at the bottom, where the animal images are at the beginning The first two apply to the draggable element, while the last four concern the drop zone.

Comments
  • I realize this is an old question, but I noticed you haven't accepted an answer and I'm trying to do something similar, so I was wondering which answer worked best for you?
  • +1 for "Chuck Norris' Way," which I'm going to use everywhere from now on. :-)
  • Thank you for your update.The reason I want to use raw javascript is that I'm doing this for study purpose.I think I've listed the jobs to do to implement it,but don't know the more detail steps:(
  • the best link is luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx. both the link in this answer and david flanagan's link fail to handle ondragstart event in IE which will cause problems in IE.
  • Could you provide a prototype demo?
  • @Shore, I thought you wanted to stay away from frameworks? (Assuming you're referring to Prototype, the framework).
  • Right,I want to keep away from frameworks.Things are easy at first,but also easy to go unexpectedly later on..
  • +1 I don't know if this is the code he was looking for, I was lookign for this great piece of code, thanks for sharing. I didn't understand why you use setCapture, but it sill his great code.
  • I would recommend to remove the w3schools link from your answer, since their site shouldn't be linked as an authority.
  • @RedWei Somebody probably got offended by my language. 20 years after middle school and I'm still surrounded by children. : p
  • @BT someone had to save this down vote disaster #upvoted ;)
  • It would be nice to know where the walterzorn.com website ended up, it has been down for a while since July/2010 [ref. forums.netobjects.com/… and it's still down!!! In the link I posetd thay say he died, is it true?
  • @Marco I believe so. It's a shame his work does not live on.
  • thanks, I found also a NEWER version than yours and pasted it here: jsfiddle.net/ADpX6/2