I failed to recheck this post and missed your response, but email will always make it to me. Thanks again
Mitch

Thanks for the complete explanation. Yes, I’ve never used the drag & drop behaviour before, and after posting the comment I also did some digging into this matter…

If you are not using the drag and drop behavior in your interface, there can be some good reasons to disable it.

Mostly I use jQuery for my web development… and you can stop this behaviour in FF by directly binding the draggesture event:

$(document).bind(”draggesture”,function(){
return false;
})

I’ve not tested but I think you can do the same for IE using the “drag” event instead of “draggesture”

This should work for every draggable element in the document.

Yes, the default drag and drop behavior in the browsers can definitely confuse users.

You point out one way: using background images. However, in FF3 the second attempt at dragging will be allowed

Actually there is an easy way to prevent the default browser event from firing. Simply add a listener to all your images and in the the listener do an event.preventDefault().

Most drag and drop libraries do this for you which is why once you register drag and drop with say an image it does not get the default behavior (of dragging).

I have done this in the past for hyperlinks (wrote a tool that you could drag links from the page and harvest them into a clipping service). When the user would click on the hyperlink it would activate it so I had to add preventDefault to stop the browser from navigating away from the page when I released on drag.

stopPropogation is another way to control event bubbling, although it completely stops propogation to any listeners while preventDefault simply stops the default browser event.

Here is a nice short article on this: http://develobert.blogspot.com/2008/10/disable-firefox-image-drag.html

For IE it seems a more global way is needed to turn it off:
document.ondragstart = function () { return false; };

Here is what I did (currently turned on for this site using jquery)
$(’img’).bind(’mousedown’, function(e) {
e.preventDefault();
});
document.ondragstart = function () { return false; };

It worked for IE, FF3 & Safari.

I’ve just finished the 2nd chapter of the book – Drag and Drop.

One thing that came to mind after reading it is the problem that can create a default behavior on Mac OS X. If you open a webpage in Safari or Firefox, you’ll find out that it’s possible to drag any image in that page. The image “ghost” is displayed with the cursor movement while dragging it.

In my opinion this can really raise a usability problem with the drag and drop pattern, tricking the user into thinking that some wrong elements are draggable.

This behavior is avoided if the images are actually applied as CSS backgrounds, but that’s a solution that can raise some other technical and accessibility issues.

Please find a screenshot that illustrates this problem here:

http://skitch.com/zyon/br98n/drag-and-drop-in-mac-os-x-problems-with-image-ghosts

Remember that I have also placed ALL of the images on the companion Flickr site. The figures on p. 245, Figures 12-18 and 12-19 can be found here:
http://flickr.com/photos/designingwebinterfaces/3121483346/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3120657237/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3121483406/in/set-72157611426334282/
http://flickr.com/photos/designingwebinterfaces/3121483430/in/set-72157611426334282/

I will let O’Reilly know of this issue for that press run for that page.

Thanks!