Drag and Drop in Firefox 4

This page offers a variety of demonstrations and experiments using jQuery and the new Drag & Drop API offered by Firefox 3.5.

Also check out this outline drag-and-drop demo, which combines most of the features demonstrated below.

Old school drag and drop

This first demo isn't anything new at all—in fact, it's a really cruddy implementation of drag & drop using pre-3.5 mouse events.

Drag me!
Drop here!

New school drag and drop

Drag me!
Drop here!

New school drag and drop, now with Event Delegation!

Using drag feedback images

  • Drag 0
  • Drag 1
  • Drag 2
  • Drag 3
Drop here!

Using data transfer content types

  • Text
  • Text / HTML / URI
  • Disallowed

  • ...and try dragging to other windows and applications.

Drop here from items on the left—and selected content from other windows and applications.
URL content appears here:
Text content appears here:
HTML content appears here:

Using drag effects

  • Drag 0 (copy)
  • Drag 1 (move)
  • Drag 2 (link)
  • Drag 3 (all)
  • Drag 4 (none)
  • Drop 0 (copy)
  • Drop 1 (move)
  • Drop 2 (link)
  • Drop 3 (all)
  • Drop 4 (none)