Drag & Drop in Explorer 4: Grabbing the Element

Drag & Drop in Explorer 4:
identifying the element

As soon as our user presses the mouse button, the mousedown event fires, and the grabEl function is called. First, we identify which element the mouse is on and assign it to our tracking variable:

whichEl = event.srcElement;

Now, this element may or not be draggable. We should not, however, do a simple check for draggability and for example, return from the function if it isn't draggable. In Explorer, the source element might very well be an I or B tag, contained within the draggable element. In fact the source element may be nested several tags deep in the draggable element. We should still be able to drag the element. How then do we identify if our mouse location is nested within a draggable element? (Try repeating this paragraph 20 times quickly)

Examining the Family Tree

For the first time in these columns, we get to use the old while loop. The contained statements will execute as long as the while expression is true. Set up a loop that executes as long as whichEl is not draggable. If our original source element is draggable, that is, if it has DRAG in its ID, the while loop is skipped.

while (whichEl.id.indexOf("DRAG") == -1) { 
    whichEl = whichEl.parentElement;
    if (whichEl == null) { return }
}
We only have two options, really. Either we are over a draggable
element, or we are not. If we are, the loop will eventually find it by
moving up through the document heirarchy. It does this by repeatedly
assigning the element's parent to whichEl. If we are not over a
draggable element, the loop will run out of parents and eventually
whichEl will be assigned a null value. We check for this null value and
return from the function.
Finding the Page Coordinates
If we are over a draggable element, we have some overhead tasks to
perform before we can move the element. These are almost identical to
the Navigator version, although the properties are different:
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
The first task is unique and is just a precaution that in most cases
is unnecessary, but in the few that it is needed it is a must. Every
element's position co-ordinates are measured from the top left of the
containing element, and every element has the internally-generated
read-only properties offsetLeft and offsetTop. pixelLeft and pixelTop
reflect the integer pixel value of the CSS properties left and top. They
are similar to Navigator's left and top properties. Because they are user-assigned, they may be wrong!
That is, they may not reflect the actual position of the
element. The reasons behind this are fairly complicated. Let's assume
that we should, to be on the safe side, make sure that pixelLeft and
pixelTop are updated to reflect the true position of the element.
Explorer provides many position measuring properties but there is not
one that gives you the "page" co-ordinates easily. The best way to
calculate the page position of an event is to add together two different
properties. clientX and clientY give us the co-ordinates in the "client
window", in the usable space of the OS window without the overhead
"chrome". They are properties of all elements.
scrollLeft and scrollTop are properties of only scrollable
elements: BODY, DIV, FRAME, IFRAME, MARQUEE, SPAN and TEXTAREA. They are
also properties of not-so-obvious scrollable elements like: BUTTON,
FIELDSET and IMG. Since BODY is the ultimate containing element,
document.body.scrollTop will give us the distance from the body
beginning (page start) to the visible part of the body (the client
window). In other words, the distance that the document has been
scrolled off the screen. Combined with clientY, we get an exact vertical
page pixel position. In the same way we can calculate the exact
horizontal position.
Those of you who read many DHTML tutorials might have noticed that
only x and y or only clientX and clientY are used elsewhere. These
properties can be used when the document is not scrollable and is opened in
a fixed-size window. The method we are discussing works for all
cases.
We now know where our mouse is, so we assign the co-ordinates to
currentX and currentY.
To better understand the properties we have discussed so far, study
the values that appear in the tool below as you move your mouse around
the page:




srcElement: 

srcElement.tagName: 

srcElement.parentElement: 

srcElement.parentElement.tagName: 

srcElement.offsetLeft: 

srcElement.offsetTop: 

srcElement.style.pixelLeft: 

srcElement.style.pixelTop: 

clientX: 

clientY: 

document.body.scrollLeft: 

document.body.scrollTop: 

Now we're ready to move the element.



Produced by Peter Belesis and
 
All Rights Reserved. Legal Notices.

Created: 10/22/97

Revised: 10/22/97
URL: https://www.webreference.com/dhtml/column7/IEgrab.html