// works on Firefox however now working for IE, Safari and Chrome
if (“files” in DataTransfer.prototype) {
alert(“supported”);
}

;)

Great post by the way. Can’t see why some readers think the code is “NOT readable at all”… so go there and waste your time typing 4.000 lines of code and we will see what’s really readable =D

There’s a real problem with consistent ghosting (at least, of text) as the default drag image on Windows Firefox (even now, months later, in 3.5.5). Just over the cubicle partition where I work, my coworker Melvin is getting text draggables ghosted, but I’m not, even though I wrote the code. Is it because I have Firebug? Maybe the Windows Firefox developers could ask Mac Firefox developers how they did it?

@I.m.orchard: I was able to get your jQuery code working on every major Mac/PC platform except Opera 10. I had to removeClass in the drop handler in addition to the dragleave handler because some browsers don’t fire the dragleave event if you drop. (That is, if you don’t removeClass there too, you get a persistent highlighting of the droppable in those browsers.)

Your code here is much lighter weight than including all of jquery.ui just for its drag-and-drop support. Thanks a bunch (“Fargo”).

The meat and potatoes appears to be plain JavaScript anyway, the only things replaced by jQuery are attaching events and the ubiquitous selection tool.

Thanks for this post!

We have just got to run a campaign to kill off some of the older browsers on the net now!

Or, is the use of jQuery the thing to which you object? Because, if that’s it, I’ll say that jQuery is one of the most popular JS frameworks – and thus will be the way many web developers approach the new drag & drop events.

We’ve got full docs on the events at developer.mozilla.org. Since this article is at hacks.mozilla.org, it was intended to be a practical introduction to the new events.

Apropos of that, jQuery allowed this to be done with concise and (hopefully) readable code that might be directly useful to webdevs. Users of other frameworks (or none at all) should be able to port the examples accordingly.

I wrote up HTML 5 native drag and drop myself on the HTML 5 Doctor site last week, which also covers custom drag images – but also how to get this working in “other” browsers too. Thought it might be useful to your readers.

@Herohtar: Yeah, I think that cursor feedback is the same as what you’d find in Windows Explorer, too. I think the thing is that since drag and drop in the browser up until now has been generally non-standard with respect to the OS, the standard OS behavior looks wrong in a browser.

After playing with it some more I think the cursor feedback makes sense, as it’s more in line with how image dragging works.

Also I was able to drag tabs into Gmail messages in 3.1 and get a nicely formatted link showing the bookmark/page title and containing an embedded url, now I only get an unformatted plain-text url.

Is this related to the new HTML5?