Drag & Drop in Explorer 4: Extra IE Features

Drag & Drop in Explorer 4:
miscellaneous features

Keeping the Dragged Element On Top

As in our previous column, we must define one of our draggable elements to be the top most in "z" order. That is, it will hide any elements that occupy the same space as it. We will use the variable activeEl, declared at the end of our script. Its original value will be our declaration, then it will track the last-dragged element.

activeEl = topmostElement
Unlike Navigator, Explorer does not have a scripting method for
placing an element above another one blindly, without reference to its
z-index value. In grabEl, we must first retrieve the value of activeEl's zIndex
property, then assign a higher value to whichEl's zIndex property.
function grabEl() {
    whichEl = event.srcElement;
    while (whichEl.id.indexOf("DRAG") == -1) {
        whichEl = whichEl.parentElement;
        if (whichEl == null) { return }
    }
    if (whichEl != activeEl) {
        whichEl.style.zIndex = activeEl.style.zIndex + 1;
        activeEl = whichEl;
    }
    whichEl.style.pixelLeft = whichEl.offsetLeft;
    whichEl.style.pixelTop = whichEl.offsetTop;
    currentX = (event.clientX + document.body.scrollLeft);
    currentY = (event.clientY + document.body.scrollTop); 
}
onSelectStart
Explorer's new onselectstart event handler allows us to react to the
user beginning a selection in the document. That is, when the user drags
the mouse in the page. Since the default action of dragging in a page is
to highlight text and/or elements, it would be best to cancel this
action if one of our elements is being moved. We add this line:
document.onselectstart = checkEl;
and this function:
function checkEl() {
    if (whichEl!=null) { return false }
}
If an element is being dragged, that is, if whichEl is not null, the
selection action is cancelled by the false return value.
Changing the Cursor
Explorer has introduced the new for-now-proprietary CSS
property cursor. It allows us to change the cursor shape in a CSS
declaration or by setting the style.cursor property dynamically. The
table below lists all the possible values. If you are using IE4, pass
your mouse down the TEST column to see your cursor change
dynamically.

Shape
CSS declaration
script assignment
TEST

cursor: default;
element.style.cursor = "default";
 

cursor: move;
element.style.cursor = "move";
 

cursor: hand;
element.style.cursor = "hand";
 

cursor: crosshair;
element.style.cursor = "crosshair";
 

cursor: wait;
element.style.cursor = "wait";
 

cursor: help;
element.style.cursor = "help";
 

cursor: w-resize;
element.style.cursor = "w-resize";
 

cursor: n-resize;
element.style.cursor = "n-resize";
 

cursor: e-resize;
element.style.cursor = "e-resize";
 

cursor: s-resize;
element.style.cursor = "s-resize";
 

cursor: nw-resize;
element.style.cursor = "nw-resize";
 

cursor: ne-resize;
element.style.cursor = "ne-resize";
 

cursor: se-resize;
element.style.cursor = "se-resize";
 

cursor: sw-resize;
element.style.cursor = "sw-resize";
 
UA
cursor: auto;
element.style.cursor = "auto";
 
The auto value returns cursor control to the browser. The remainder
are self-explanatory.
We want our cursor to take the move shape whenever our mouse is
over a draggable element. This signals the user that a drag is
possible.
We use the onmouseover handler. Unlike the mouse position, which can
only be a pixel, the mouse can be over several elements at the same
time; any valid one will trigger the cursor change. When the mouse moves
out of a draggable element, it moves over an un-draggable one so the
cursor changes back.
function cursEl() {
    if (event.srcElement.id.indexOf("DRAG") != -1) { 
        event.srcElement.style.cursor = "move"
    }
}
document.onmouseover = cursEl;
We can now safely put all the code together for Explorer drag & drop.



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

Created: Oct 22, 1997

Revised: July 20, 1999
URL: https://www.webreference.com/dhtml/column7/IExtra.html