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

Drag & Drop in Explorer 4: Moving the Element


Drag & Drop in Explorer 4:
moving and dropping the element

Our grabEl function, for identifying the element, has now taken this form:

    function grabEl() { whichEl = event.srcElement; while (whichEl.id.indexOf("DRAG") == -1) { whichEl = whichEl.parentElement; if (whichEl == null) { return } } whichEl.style.pixelLeft = whichEl.offsetLeft; whichEl.style.pixelTop = whichEl.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); }

The function for moving the element, moveEl, is identical to the Navigator version, conceptually. Again, the properties are different:

Because of the universal mousemove event firing, we first check to see if whichEl is null. If it is it means that we have yet to press the mouse button or there is no draggable element under our mouse. In both of these cases, the function should return.

    if (whichEl == null) { return };

If we have an element to move, the function continues. Since the mouse has moved since the mousedown, we must calculate our new position. We assign this new position to newX and newY:

    newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop);

Using this new position, we calculate the distance the mouse has moved by subtracting the last documented move (currentx, currentY) from the new one:

    distanceX = (newX - currentX); distanceY = (newY - currentY);

We save the new position for use next time the mouse moves, by updating the values of currentX and currentY:

    currentX = newX; currentY = newY;

To actually move the element, we increment the pixelLeft and pixelTop properties of its style with the respective mouse distances.

    whichEl.style.pixelLeft += distanceX; whichEl.style.pixelTop += distanceY;

Although not absolutely necessary in every case, we supply a false return value for the event, in case another action has been associated with the event. The false value will cancel any other actions. In our present example, moving the element is the only action associated, but other applications may have more than one.

    event.returnValue = false;

The complete function:

    function moveEl() { if (whichEl == null) { return }; newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichEl.style.pixelLeft += distanceX; whichEl.style.pixelTop += distanceY; event.returnValue = false; }

Our simplest function is the one associated with the end of the drag, dropEl. We simply assign a null value to our element-tracking variable. Since our other functions check for null values, this, in effect cancels the event handling.

    function dropEl() { whichEl = null; }

Let's look at keeping the dragged element on top and a couple of Explorer-specific features.

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/IEmove.html