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