Building `Drag-and-Drop` DIVs: Developing a Basic Script

In most cases, drag-and-drop triggering effects can be achieved by a combination of simple events, which when fired up in the appropriate sequence, emulate a real dragging behavior on the elements of a web document. Outlined through a simple step-by-step format, the overall process for simulating a drag-and-drop effect can be described by the steps below:

1. The user left-clicks on the selected element (the event is trapped by an “onclick” event handler).
2. The user moves the mouse over the element (the event is trapped by an “onmousemove” event handler).
3. The user releases the mouse button on the selected element (the event is handled by the “onmouseup” event handler).

As you can see, a basic dragging effect on most web page elements involves handling programmatically the three events listed above in the correct sequence, which simply means that whenever a “click” event is triggered by the source element, mouse movements must be tracked on and the corresponding X,Y coordinates should be assigned to the pertinent element. Finally, the dragging process should be terminated when the mouse’s left button is released.

Even when the sequence described above is fairly easy to outline, it’s not always simple to translate into raw JavaScript code. So, let’s stay away from the underlying theory for a while, and define the appropriate event handlers that control the whole dragging process. In its simplest incarnation, drag-and-drop elements can be created with the following piece of JavaScript code:

window.onload=function(){
 document.onmousedown=startDrag;
 document.onmouseup=stopDrag;
}

As shown above, the dragging process is achieved by assigning respectively the “onmousedown” and “onmouseup” event handlers to the document object, and firing up a specific function in accordance with the event triggered. In this case, to be illustrative enough, I’ve assigned the “startDrag()” function to the first event, while the “stopDrag()” function has been attached to the second event. At this point probably you’re asking yourself…where has the “onmousemove” handler been implemented? Well, if you reread the sequence of steps that I described right at the beginning of this section, then you’ll realize that this handler is encapsulated within the “startDrag()” function, which hopefully will result in a quite realistic dragging effect on the page element that originally triggered the “mousedown” event.

Now, using highly generic code, I’ve explained how a drag-and-drop effect can be simulated on selected elements. Assuming that you’ve grasped the script’s driving logic, what I’ll do next is show you the definition of both “startDrag()” and “stopDrag()” functions, which will be attached to DIV elements. Join me into the next explanation to figure out how this is done.