HTML5 Drag And Drop Sucks

Press →.

Zoom +/-: Ctrl or Command + +/-


Inspired by : http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Pierre-Loic Doulcet @hexapode / doulcet@gmail.com

HTML5 Drag and Drop API Sucks!

A short introduction to HTML5 Drag And Drop disaster.

and what you MUST (in the sense of RFC 2119) do with it!

#1 Where does HTML5 Drag and Drop API come from ?



#2 How does this happen ?

Microsoft 'designed' and implemented drag and drop way back in 1999

when IE 5.0 was released.
IE versions has supported it ever since.

Because IE support it, so do Firefox and Safari.

Why is it so bad?

Reason 2 : dragover / dragenter issue

Lot of events :


dragstart, drag, dragover, dragenter, dragleave, drop, and dragend.

BUT

If you want the drop event to fire,
you have to cancel the defaults
of both the dragover and the dragenter event.

The default action of the dragover and the dragenter events is :
NOT being able to drop an element!

You have to cancel these default actions in order to drop an element.

The dragover and dragenter events exist
for the sole reason of forcing web developers
who want to perform a drop action to cancel their obscure default actions.

Why is it so bad 2?

Reason 2 : dragenter and dragleave work like...

... mouseover / mouseout

MouseOver and MouseOut Bubble A LOT.

For a specificaion designed by Microsoft
why not make them behave like
MouseEnter / MouseLeave (IE) event?

Why is it so bad 3?

Saffari

In order to get drag and drop working in Safari, add this to your CSS :

#tobedragged {-khtml-user-drag: element;}

Why is it so bad 4?

Cryptik dropEffect

dropEffect property actually set the drag effect

Question ?

Interoperability is important
BUT NOT
at this price!



What should you do ?
#1 - NOT USE IT
#2 - Spread the word
#3 - Hack It !