Weird attachEvent Issue

Dragging & Dropping OK - but why highlight?

[StupidScript]

I have built a fairly basic Javascript for dragging and dropping DIVs containing questions into position next to "correct" answers ... it's a quiz.

I'm not having trouble with attachEvent or addEventListener, in that dragging and dropping is going just fine.

However, in MSIE 7/8, when I release my mouse button to "drop" an item, everything on the page gets highlighted, as if I had selected everything (the same effect as pressing "Ctrl+A").

So ... click/drag = cool, drag to position and drop = cool, but the "mouseup" event in MSIE 7/8 seems to trigger a "select all" type of behavior.

I can clear it by clicking the mouse anywhere on the screen, but it is quite irritating. I've tried various "blur()" and "focus()" tricks to try to kill the "select all" snafu, and I have also been experimenting with detachEvent and preventDefault/return false techniques, with no effect. Regardless of what I try, I can't get rid of that "select all" effect when releasing the mouse (dropping) in MSIE 7/8. It does not do this in Firefox/Opera/Safari ... just MSIE 7/8.

I realize that MSIE treats event capturing as a "window" event, rather than as an "object" event, so this is where I am focusing my efforts at the moment.

Is there some sort of release trick that I am missing? Any thoughts are appreciated. The script is pretty long, otherwise I'd paste it in here, right now.

[StupidScript]

Well ... something figured out, but not too helpful:

The highlighting is only happening in the area through which the drag occurs, because MSIE seems to think that I am clicking-and-dragging the cursor through the text. It is not distinguishing between the DIV I am dragging and the rest of the stuff on the page.

Since the element-to-drag is at the "bottom" of the code, whenever I click and drag it, MSIE thinks I want to select everything the cursor passes over, in addition to dragging the DIV. When the mouse button is released, MSIE thinks I am done selecting stuff, and highlights my "selection".

I realize that this is a "feature" Microsoft figured would be handy, based on their implementation of event capturing at the window level, contrary to the standards-based object-level implementation, unfortunately.

How can I get MSIE to just drag the object, and not select everything the cursor passes over while doing so? Is there a trick to forcing MSIE to handle an event at the object level, and ignore the window level? (I know I am using the word "trick" a lot ... because MSIE demands "tricks" in order to play well with the rest of the world.)

TIA.

[Fotiman]

While you are dragging and when you mouseup, you probably want to prevent the browser default event handling for those events. Note, there are JavaScript frameworks that handle cross browser drag and drop already. You might consider using one of those (YUI, jQuery, etc.).

[StupidScript]

Thanks for the reply. It's not a question of using an existing library, it's a question of understanding what is going on. And besides, I have investigated how other libraries handle drag-and-drop, and they are not really different from what I have in my homebrew script ... the functionality itself is quite simple, it's the side effects that are making it weird.

Here's my event capturing code:

drg=document.getElementsById('dragger');
isie = (drg.attachEvent!=-1)?0:1;
if (!isie) {
drg.addEventListener('mousedown',beginDrag,false);
addEventListener('mousemove',Drag,false);
addEventListener('mouseup',endDrag,false);
}
else {
drg.attachEvent('onmousedown',beginDrag);
drg.attachEvent('onmousemove',Drag);
drg.attachEvent('onmouseup',endDrag);
}

There's not much to it. Every library I have checked doesn't deviate from those concepts. It's what is happening when the mouse button is released in MSIE that is causing trouble.

I find it really irritating that the attached object is required by and then ignored by MSIE. Note how I do not need to attach the mousemove or mouseup events to an object in !isie, even though those browsers use the object, whereas MSIE insists on using the object reference in every instance of the capture process, and then it doesn't give any importance to the object, after the capture has been accomplished.

<edit>
BTW, is doesn't matter which method I use to execute the event capture ... MSIE does the same thing with any of them. For example, instead of using "attachEvent", I have tried the pre-"attachEvent" code:

drg.onmousedown=beginDrag;
drg.onmousemove=Drag;
drg.onmouseup=endDrag;

and the dragging-and-dropping is completely unaffected ... including the MSIE side effect of selecting stuff onmouseup. So it's not necessarily an artifact of attachEvent, but more like a problem with how MSIE handles events, in general, and how it doesn't separate the objects from the rest of the document correctly.
</edit>

[StupidScript]

Here's a BS kludge ... terrible ... I put it in endDrag:

if (isie) {
for (i=0;i<=document.elements.length-1;i++) {
document.elements[i].blur();
}
}

Just terrible. But the "select all" "feature" no longer happens. Yech.

PS: Using "window.event.cancelBubble=true" and/or "window.event.returnValue=false" in this same location does exactly nothing to solve the problem, and really, they should have no effect, because the MSDN docs say that "cancelBubble" and "returnValue" relate to a stinking OBJECT ... which MSIE does not use in an event capture. Feh.