Drag and Drop in Firefox 3.5

by l.m.orchard <lorchard@mozilla.com> 0xDECAFBAD

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)