Dragging and IE7
So I got an email today from someone having issues with dragging things in IE7. They even hit my example in the wikitorial for resizing things and reproduced their trouble. The issue showed up as they tried to drag the handle. Nothing happened until they released (mouseup) the handle and then the object followed the mouse around until they clicked again.
After a bit of work I figured it out: IE thinks you’re trying to drag the image (as if to download it to, say, your desktop). This in turn delays the event for mousedown or something and screws up drag.
The solution is to avoid using images (and probably also links) and instead use a DOM element with a background image instead. IE doesn’t think you’re trying to drag the item at the OS level if it’s just a DOM element.
Thanks again Microsoft, for taking up my time!
Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.
December 10th, 2008 at 9:02 pm
Hey Aaron,
You can kinda fix the problem by adding the following to the end of the initialize method of the Drag class. In my uncompressed MooTools 1.2.1 file it’s at around line 4151.
//HACK: Fix stupid IE ondragstart intercept event.if(Browser.Engine.name == 'trident' && Browser.Engine.version == 5) {
this.handles.ondragstart = function() {
return false;
};
};
The reason why I say “kinda” fix is that it only fixes the funny “sticky” mouse part of the problem, but the image still doesn’t move when you start dragging. When you release the button the image then jumps to where you released the mouse button.
BTW, your book is DA BOMB! (in capital letters)
December 11th, 2008 at 7:12 am
I don’t think it’s a browser bug actually. Both FF3 (but not FF2) and Opera 9.6 seem to have similar behaviour. But it too stumbled upon it in IE7 first and though it to be yet another bug. I onced used MooTools’ sortables with images (in img tags, not as backgorunds) and almost blamed it for this silly dragging thing, but then tried to drag any other image and boom, there you go!
Now, if you can’t use background images for some reasons, you can disable this dragging with
document.ondragstart = function() {return false;};
March 24th, 2009 at 5:00 am
For any fellow Moo’ers, MooTool’s drag class has an undocumented option called: preventDefault which when set to true will fix this.
March 30th, 2009 at 10:10 pm
Lewis, you are a legend!
I was already using the IE hack above until I read your post. This is a much more elegant solution for mootools users.
Much appreciated!