Drag & Drop in Explorer 4: Grabbing the Element | WebReference

Drag & Drop in Explorer 4: Grabbing the Element

Logo

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: http://www.webreference.com/dhtml/column7/IEgrab.html


Justtechjobs.comFind a programming school near you






Online Campus Both