Click here to Skip to main content
13,139,569 members (54,433 online)
Click here to Skip to main content
Add your own
alternative version


47 bookmarked
Posted 29 Aug 2007

Drag and Drop using Javascript

, 6 Nov 2007
Rate this:
Please Sign up or sign in to vote.
This is an article that talks of an approach to drag and drop elements in an HTML page


With people pushing towards user centric development, the drag and drop feature is just one of the many such features that is commonly seen across the web pages that stress on user-centric development.This article discusses an approach to achieve such a feature keeping in mind the issues of browser compatibility.

Using the code

I have used an OOP approach for this( it surely can be done without the OOP). The main class that is responsible for drag and drop is Drag. All we need to get it going is call the Init() function. What this simply does is determine the kind of browser and set the corresponding variables.

With drag and drop what comes to my mind is

  1. Mouse button goes down,
  2. Mouse moves,
  3. Mouse button goes up.

We will control the location of the 'element' by retrieving the current (x,y) co-ordinates of the mouse and setting the left,top attributes of the element.

Class declaration:

function Drag()



function Position()

Do not be intimidated by the number of the functions,most of them are just getters and setters and are self explanatory.Here are some of which deserve an explanation:

  • -> This will hold the id of the 'element' that we would be dragging.
  • this.eventObj -> Considering the cross browser discrepencies, I have used 'eventObj' to denote the 'event' object of different browsers.
  • this.beginDrag -> This is a flag that is used to indicate the status of the drag operation.
    function Move(obj,pos)

    function GetCurrentCoOrdinates()
        var pos=new Position()

            pos.x=(typeof this.GetEventObj().pageX =="undefined") ? 0 : this.GetEventObj().pageX
            pos.y=(typeof this.GetEventObj().pageY =="undefined") ? 0 : this.GetEventObj().pageY
        else if(this.GetBrowserType()=="IE")
            pos.x=(this.GetEventObj().x < 0 || typeof this.GetEventObj().x=="undefined")? 0 : this.GetEventObj().x
            pos.y=(this.GetEventObj().y < 0 || typeof this.GetEventObj().y=="undefined")? 0 : this.GetEventObj().y

        return pos

function RemoveChild()
        var obj=document.getElementById(this.GetId())
        var objParent=obj.offsetParent
        var objBody=document.getElementById(this.bodyID)

As show in the class declaration, Move() is responsible for actually moving the element in question. GetCurrentCoOrdinates() as the name suggests, returns the Position object. I will not be explaining the implementation of the rest of the functions as the name suggests their functionality and they are included in the sample source code.

RemoveChild is a bug fix. Prior to this, the elements were bounded by the area of their parent(they were unable to go left beyond their parent's area). To circumvent this problem, I remove the target element from its parent and append it to the body of the page. The body has the full page area. The old restrictions of being bounded still exist, but since the body is the page, we do not experience this bound. And since we are appending it to the body, we need to give the body an id. I set the id when calling Init().

We need to handle the onmousedown, onmousemove, onmouseup events, we need to specify explicitly that we are interested in doing so.

document.onmousemove=function(e) //e for Mozilla Firefox

        if(dragObj.GetId()!=null && dragObj.beginDrag==true)

Note: There seems to be a bug in Internet Explorer because it doesn't call the 'onmouseup' event when specified in the declaration of the 'element' so I had to write it down explicitly. To handle mouse down there I have used a function HandleMouseDown(id).

function HandleMouseUp(id)
    dragObj.EndDrag() //set the beginDrag flag to false
    dragObj.SetId("") //clear the id, since we stopped dragging the 'element'

function HandleMouseDown(id)

        dragObj.BeginDrag() //set the beginDrag flag to true
        dragObj.SetId(id)   //set the id to denote the 'element' we are interested to drag.

function HandleMouseMove(eventObj) //this would accept the parameter for event, which is a local object for Firefox.
{                                  //Since it is a global object in Internet Explorer, we don't have to worry about it.

        if(typeof eventObj!="undefined")  //this means browser is Firefox

            if(dragObj.GetId()!=null && dragObj.beginDrag==true)
        else    //this means browser is Internet Explorer
            if(dragObj.GetId()!=null && dragObj.beginDrag==true)


When the drag ends the zIndex would be set back to null.Setting zIndex brings the element in question in the foreground. Finally you would have to add this piece of code while declaring the element :

onmousedown="javascript:HandleMouseDown(" onmouseup="javascript:HandleMouseUp(" onmousemove="HandleMouseMove("

We are now ready to drag. I have attached a sample for reference.


v 1.0 Added

v 1.1 A bug fix,elements now aren't bounded by their parent's area.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

No Biography provided

You may also be interested in...


Comments and Discussions

GeneralBugs are there Pin
abhijit.coder30-Oct-07 22:54
memberabhijit.coder30-Oct-07 22:54 
GeneralRe: Bugs are there Pin
its.chaitanya31-Oct-07 5:11
memberits.chaitanya31-Oct-07 5:11 
Generaldiv's upper corner jumps to mouse cursor, and parent clip Pin
dncpax26-Sep-07 22:46
memberdncpax26-Sep-07 22:46 
GeneralRe: div's upper corner jumps to mouse cursor, and parent clip Pin
its.chaitanya6-Sep-07 23:53
memberits.chaitanya6-Sep-07 23:53 
GeneralRe: div's upper corner jumps to mouse cursor, and parent clip Pin
its.chaitanya6-Sep-07 23:57
memberits.chaitanya6-Sep-07 23:57 
GeneralRe: div's upper corner jumps to mouse cursor, and parent clip Pin
its.chaitanya7-Sep-07 0:09
memberits.chaitanya7-Sep-07 0:09 
GeneralNo sample for download Pin
Preky29-Aug-07 21:58
memberPreky29-Aug-07 21:58 
GeneralRe: No sample for download Pin
its.chaitanya29-Aug-07 22:32
memberits.chaitanya29-Aug-07 22:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 6 Nov 2007
Article Copyright 2007 by its.chaitanya
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid