Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Drag n Drop in

Posted by Navi's on June 9, 2010

To Implement the drag n drop functionality in Web application we can use different api’s.
But we can achieve this without using any api.

DND requires three basic events i.e. onmousedown, onmousemove and onmouseup.

You can achieve the DND using these three events. So, on onmousedown you can get the dragged control-id and change its x and y position on onmousemove event. and on onmouseup event drop that control.

To find out the drag able control we apply additional class on it and give any name to that class. you can define that class on style-sheet of on page in style like this


Apply this drag class to identify the div using class name.

<div class='drag' id=d1/>

first create the OnDrag function which identify the event and control to be move

var draged = false
var dragElement
var x, y

function OnDrag(event) {
              if (event == null)
                    event = window.event;

 var target = != null ? : event.srcElement;

 if (target.className == "drag") {
		y = event.clientY;
                          x = event.clientX;
 document.onmousemove = OnMouseMove;

return false;

On OnMouseMove Event

function OnMouseMove(event) {
  if (event == null)
                  event = window.event;

if ((event.button == 1 && draged && window.event != null || event.button == 0 && draged) && dragElement.className == "drag") {
         = event.clientX - x - document.body.scrollLeft + 'px';
         = event.clientY - y - document.body.scrollTop + 'px';
                  return false;


On OnMouseUp event

 function OnMouseUpEvent() {
draged = false;

This is the basics of DND. You can modify as per your requirement.


2 Responses to “Drag n Drop in”

  1. security said

    sorry my bad english thank you for good post

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: