| home / experts / dhtml / column6 |   
|
|
It is said that when Columbus first sailed west, he didn't know where he was going. When he landed, he didn't know where he was, and when he returned home he didn't know where he had been.
In dealing with mouse moves, we must know exactly where we are at all times and how much we have moved between event firings. First of all, when grabEl is called we must record a mouse position. This position will later be compared to new positions, when the mouse has moved, and a distance to move the element will be calculated. But, first things first.
Navigator's unnamed event object carries with it several properties we can use. See the popup in column3 for a detailed examination. Presently, we are concerned with two of them: pageX and pageY, the values of which correspond to the page offset, in pixels, where the event (the mousedown, in this case) took place. Since we have chosen to name our event object e, these properties can be referenced as e.pageX and e.pageY. In our grabEl function, we will assign these values to two variables: currentX and currentY, representing the current location of the mouse pointer. Since these variables need to be available to all functions, we initialize them as global variables.
We have now recorded the original mouse position and set up a capture. When the user moves the mouse a new event object is created, and moveEl is called. In moveEl, the first thing we do is calculate the distance the mouse has moved. We create new variables, distanceX and distanceY to store the difference between the original mouse position (currentX, currentY) and the new mouse position (e.pageX, e.pageY):
function moveEl(
e) { // NOTE: include event object identifier distanceX = (e.pageX - currentX); distanceY = (e.pageY - currentY); }
The distance to move the element is now known to us. Next, we must store the new current position to be used next time the mouse moves. Thus, currentX and currentY are updated with the values of the new mouse position:
function moveEl(e) { distanceX = (e.pageX - currentX); distanceY = (e.pageY - currentY);
currentX = e.pageX; currentY = e.pageY; }
Finally, we must actually move the element. Using the JavaScript 1.2 moveBy() method, we need only to pass it the two distances:
function moveEl(e) { distanceX = (e.pageX - currentX); distanceY = (e.pageY - currentY); currentX = e.pageX; currentY = e.pageY;
document.elOne.moveBy(distanceX,distanceY); }
 |
Every time the mouse moves, the element will move accordingly. Only when the mouseup event fires and the mouse move captures are released will the element stop moving. This simple, and admittedly overelaborated, routine is all that is necessary to drag an element around the page. The complete code will be repeated in our final page, as usual.
Enabling the dragging of more than one element, without separate functions, is a little trickier.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 10/08/97
Revised: 10/23/97
URL: http://www.webreference.com/dhtml/column6/dragOne.html
