Drag And Drop In Javascript

1. capture the mouse coordinates

function getMouseOffset(target, ev){
    ev = ev || window.event;

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
    var left = 0;
    var top  = 0;

    while (e.offsetParent){
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }

    left += e.offsetLeft;
    top  += e.offsetTop;

    return {x:left, y:top};
}

 

 2. be clear when mouse button is pressed and when it is released

 

function mouseMove(ev){
    ev           = ev || window.event;
    var mousePos = mouseCoords(ev);

    if(dragObject){
        dragObject.style.position = 'absolute';
        dragObject.style.top      = mousePos.y - mouseOffset.y;
        dragObject.style.left     = mousePos.x - mouseOffset.x;

        return false;
    }
}
function mouseUp(){
    dragObject = null;
}

function mouseDown(ev,item){
    dragObject = item;
    mouseOffset = getMouseOffset(item, ev);
    return false;
}

 

3. when mouseMove you should care about the mouse coordiate

 

function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

 

now the whole code is :

 

< html >
< head >
< title > Show Mouse Coordinates </ title >
< script  language ="javascript" > ...
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev)...{
    ev = ev || window.event;

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return ...{x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e)...{
    var left = 0;
    var top  = 0;

    while (e.offsetParent)...{
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }

    left += e.offsetLeft;
    top  += e.offsetTop;

    return ...{x:left, y:top};
}

function mouseMove(ev)...{
    ev           = ev || window.event;
    var mousePos = mouseCoords(ev);

    if(dragObject)...{
        dragObject.style.position = 'absolute';
        dragObject.style.top      = mousePos.y - mouseOffset.y;
        dragObject.style.left     = mousePos.x - mouseOffset.x;

        return false;
    }
}
function mouseUp()...{
    dragObject = null;
}

function mouseDown(ev,item)...{
    dragObject = item;
    mouseOffset = getMouseOffset(item, ev);
    return false;
}

function mouseCoords(ev)...{
    if(ev.pageX || ev.pageY)...{
        return ...{x:ev.pageX, y:ev.pageY};
    }
    return ...{
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}


</ script >
</ head >
< body >
< div  onmousedown ="mouseDown(event,this)"  onmouseup ="mouseUp();"  onmousemove ="mouseMove(this)"  id ="club" >
< img  src ="club.gif"    />
</ div >
< img  src ="diamond.gif"  id ="diamond" />
< img  src ="heart.gif"  id ="heart" />
< img  src ="spade.gif"  id ="spade" />
</ div >
</ body >
</ html >