Drag and Drop is very useful and popular feature in the modern web-based applications. Today I will explore how actually drag and drop works. Before I dive into explanation, lets take a look of the demo, where I can drag an image to anywhere in the webpage.

Concept

There are 3 steps to perform a drag and drop operation. here is the concept:

  • Click and hold the mouse button down over an element(ie, image, div)
  • Drag or move it to another location of the webpage
  • Release the mouse button to drop the element on that location.

Javascript Drag And Drop Behind The Scene

Behind the scene

So we’ll assign element position according to mouse position, means we’ll grab mouse co-ordinate and move the element by css left and top property. Make sure your element css position set to absolute.

For above three operation we’ll create three function MouseDown, MouseMove and MouseUp respectively.

Lets take an image in the webpage and assign a class “dragme” which is our draggable element.

1
<img class="dragme" src="http://placehold.it/200/f4645f/363636&text=%3CCoder%3E%3C/Example%3E"   title="CoderExample" />

But first we have to make sure MouseDown, MouseUp function can accessible from every element available in the dom. So we’ll loading those function and initialize some variable onload.

1
2
3
4
5
6
7
8
9
window.onload = function(){
    var _startX = 0;            // mouse starting positions
    var _startY = 0;
    var _offsetX = 0;           // current element offset
    var _offsetY = 0;
    var _temp;          // will use as temporarily variable OnMouseDown to OnMouseMove
    this.onmousedown = MouseDown;
    this.onmouseup = MouseUp;
}

When our mousedown on the image. We take target element as per class name “dragme”. Then fetch horizontal coordinate and vertical coordinate of the mouse using clientX and clientY. Also we’ll fetch draggable element’s left and top and store all values in the temporarily variable. Now its time to trigger mousemove function.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function MouseDown(e) {
 
    // All browser takes target except IE
    var target = e.target != null ? e.target : e.srcElement;
    if (target.className == 'dragme') {
    // store the mouse position
    _startX = e.clientX;
    _startY = e.clientY;
 
    // store draggable/image object position
    _offsetX = parseInt(target.style.left);
    _offsetX = null || isNaN(_offsetX) ? 0 : _offsetX;
    _offsetY = parseInt(target.style.top);
    _offsetY = null || isNaN(_offsetY) ? 0 : _offsetY;
 
    // temporarily store the clicked draggable/image object on mousemove
    _temp = target;
 
    // call mousemove function on mousemove event.
    window.onmousemove = MouseMove;
    return false;
    }
}

In every trigger we’ll be continue replacing the element’s left and top property according to mouse position.

1
2
3
4
5
6
7
function MouseMove(e) {
    if (e == null)
    var e = window.event;
    // replacing dragged location left & top on draggable/image object
    _temp.style.left = (_offsetX + e.clientX - _startX) + 'px';
    _temp.style.top = (_offsetY + e.clientY - _startY) + 'px';
}

Now Element has been dragged as per mouse position. Lets release the mouse. So in MouseUp function we’ll reset all the resources and drop the element.

1
2
3
4
5
6
7
function MouseUp(e) {
    if (_temp != null) {
        // we'll not capture any location on mouse release, as our dragging is complete now.
        window.onmousemove = null;
        _temp = null;
    }
}

Okay and this is just the overview. There are many things to do. It may take time for you to work through the details.

Did I miss anything? Please comment below and let me know your thoughts.