Building `Drag-and-Drop` DIVs: Developing a Basic Script - Dragging DIV elements: defining the “startDrag()” function
(Page 3 of 5 )
Since I previously attached the “startDrag()” function to the “onmousedown” event handler, which was tied to the document object, I’ll define the signature for this function, so you can understand how it works. Its source code is as follows:
function startDrag(e){
// determine event object
if(!e){var e=window.event};
// determine target element
var targ=e.target?e.target:e.srcElement;
if(targ.className!='draggable'){return};
// calculate event X,Y coordinates
offsetX=e.clientX;
offsetY=e.clientY;
// assign default values for top and left properties
if(!targ.style.left){targ.style.left='0px'};
if(!targ.style.top){targ.style.top='0px'};
// calculate integer values for top and left properties
coordX=parseInt(targ.style.left);
coordY=parseInt(targ.style.top);
drag=true;
// move div element
document.onmousemove=dragDiv;
}
As listed above, the “startDrag()” function takes an event object as the only incoming parameter, and then performs a simple checking process, in order to resolve the incompatibilities between Internet Explorer and the other browsers for obtaining the event fired by the corresponding DIV element. The verifying line shown below implements a cross-browser approximation for determining which event was triggered:
// determine event object
if(!e){var e=window.event};
In a similar way, the function next determines, in a cross-browser fashion, the source element that fired up the “mousedown” event, as follows:
// determine target element
var targ=e.target?e.target:e.srcElement;
After the event object and the source DIV element have been appropriately tracked, the function carries out two crucial operations: first it checks whether the DIV class name is “draggable,” and then it calculates the X,Y coordinates at which the mouse was clicked on, along with the top and left position of the DIV box. The first checking process obeys a simple reason: I don’t want all the DIVs included on the web page to be dragged by the user. The script should target only those that have a “draggable” class name, therefore if the selected element doesn’t have such a CSS class, the function simply does nothing.
Now, returning to the function flow, the calculations for assigning the new X,Y coordinates to the selected DIV element each time the user left-clicks on it, are very important in order to achieve a decent “dragging” effect.
As you can see, the logic of the function is quite simple to understand. However, there’s one thing worth noting: notice how I use a flag variable (drag) in order to indicate that the corresponding DIV box is currently being dragged. The last task the function performs is to tie the “onmousemove” event handler to the document object and trigger the “dragDiv()” function, so the DIV element can be properly moved around the web page.
Now that you know how the “startDrag()” functions does its business, it’s time to have a look at the “dragDiv()” function, which, as you’ll see in a moment, is responsible for moving DIV boxes around. So, let’s move on and see how this function is appropriately defined.
Next: Moving DIVs around the web document: defining the “dragDiv()” function >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
