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

Having explained how the “startDrag()” function calculates the X,Y coordinates for moving a DIV element, I’ll first show how the “dragDiv()” function looks, and next explain what it does. Here’s the source code for this function:

function dragDiv(e){
 if(!drag){return};
 if(!e){var e=window.event};
 var targ=e.target?e.target:e.srcElement;
 // move div element
   targ.style.left=coordX+e.clientX-offsetX+'px';
   targ.style.top=coordY+e.clientY-offsetY+'px';
   return false;
}

Here, the function actually performs a extremely simple task. As illustrated above, as long as the user moves the mouse over the selected DIV, its coordinates are continuously updated by the following lines:

However, it seems that I’ve skipped over the first statements of the function. In fact, I haven’t. The line below:

if(!drag){return};

checks to see if the “drag” flag variable is either true or false. The first case means the user has started dragging the mouse on the DIV element, while the second one means the user has stopped dragging on it. As you may have realized, this flag variable provides us with a very convenient and simple method for determining when to update the top-left coordinates of the corresponding DIV, in response to the mouse event triggered by the user.

Finally, the lines of code responsible for getting the triggered event, as well as the source DIV element, really look redundant. Well, there is a valid justification for doing this. Internet Explorer is sometimes pretty slow for tracking some mouse events, particularly if they’re triggered over and over again at short time intervals. By including these lines, I make sure that most browsers will properly track the fired event, and determine correctly the corresponding source element.

After having defined the logic for both the “startDrag()” and “dragDiv()” functions, I’m pretty sure you’ve guessed how the “stopDrag()” function works. Haven’t you yet? All right, let me give you a clue. Since this function is called up for a “mouseup” event, all it has to do is set the “drag” flag to false, in this way indicating that the user has released the mouse’ s left button. Considering this, here’s the signature for this function:

function stopDrag(){
 drag=false;
}

That’s it. If you feel inclined to code the function above as one-liner, go ahead. Here, for the sake of clarity I’ve used a multi-line definition.

Now that I’ve demonstrated how each JavaScript function does its thing to achieve a realistic “drag-and-drop” effect on DIVs, it’s time to put all the pieces together and assemble the complete DIV dragging script. Keep reading to see how each function fits into the complete JavaScript application.