Drag & Drop in Explorer 4: Extra IE Features | WebReference

Drag & Drop in Explorer 4: Extra IE Features

Logo

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.

ShapeCSS declarationscript assignmentTEST
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: http://www.webreference.com/dhtml/column7/IExtra.html