Drag and drop in web applications

Such functionality can be implemented in JavaScript by addition and removal of events. The element that should support drag and drop needs an onmousedown event that calls the function trackElement.
trackElement doesn't do much except for adding two more elements when the mouse button is pressed on the element in question.

The moveElement function is then called each time the user moves his mouse. It updates the position of the element to the position of the mouse (in relation to the element's size). The event is added to the whole window because the user can move the mouse faster than the browser renders, making it possible to outrun the movement of the element.

Finally, stopTracking is called when the user releases the mouse button. It merely removes the events that track the mouse movement and wait for the release of the button.

Code:

var trackedObject;



function trackElement(event) {
trackedObject = event.target;
window.addEventListener("mousemove", moveElement, false);
trackedObject.addEventListener("mouseup", stopTracking, false);
}



function moveElement(event) {
trackedObject.style.top = event.clientY - parseInt(trackedObject.style.height) / 2;
trackedObject.style.left = event.clientX - parseInt(trackedObject.style.width) / 2;
}



function stopTracking(event) {
window.removeEventListener("mousemove", moveElement, false);
trackedObject.removeEventListener("mouseup", stopTracking, false);
}