Drag And Drop Bugs

I have documented the several bugs and inconsistencies of browser implementations of the HTML 5 Drag and Drop spec. Where applicable, I have also added workarounds that I have found. I haven’t had time to codify them all here, but I will be keeping this page up to date as I continue to work with this feature.

Safari/WebKit Bugs

  • Setting draggable to true doesn’t work in shipping Safari

    Workaround: In Safari you also have to set -khtml-user-drag to element.

  • Drags initiated from image elements ignore setDragImage calls (Bug 28381)

    In Safari and WebKit, setDragImage is ignored when dragging image elements unless draggable is explicitly set to true on the element. In FireFox, draggable can be set to true on a parent. Additionally, images are draggable by default.

    Workaround: Set draggable to true on the image element.

  • dataTransfer.types is null

    In Safari and WebKit, dataTransfer.types is null after setting it in the dragstart event.
    Workaround: No workaround, just store the types yourself separately.

Firefox/Mozilla Bugs

  • Can’t call setData in “drag” events (Bug 510751)

    On FireFox you can only call setData from “dragstart” events.
    Workaround: No workaround unfortunately.
  • setDragImage() only works with visible elements.

    In FireFox, unless you are using a canvas element, setDragImage will ignore invisible elements that are passed in. Visibility is strictly defined, not allowing even elements in the document that are just obscured.