Drag and Drop - Introducing HTML5 - page 182

Having to construct the different content types on the dragstart
event makes you perform possibly unnecessary code execution.
For example, if I were to allow the user to drag a canvas element
to Photoshop, I would want to encode it as a Photoshop-compatible
file and store it in the correct content type. But what if I'm also
supporting other formats along with Photoshop? I'd have to do all
that encoding at the point in which the dragstart event fires, but
the user will, at best, only drop it on a single application. What
if they're just dragging the element around to play? You've still
run all that execution, a huge waste of processing for more com-
plicated applications. If your application is simple, you may not
see any performance issues; but if it's a fully fledged application,
you're going to have to consider your options. Perhaps you don't
support all those formats. Perhaps you only support one compat-
ible format. Perhaps you don't even support drag and drop.
There are proposals to fi x this (along with proposals to scrap the
entire drag and drop model and start again), but for the medium
term, this is a problem you'll have to work around.

NOTE In total, there are
seven drag and drop
events. You've seen
dragenter , dragover , drop ,
and dragstart . In addition
there is dragend (the comple-
ment to dragstart ) and
dragenter and dragleave .
The enter and leave events fi re
on the dropzone as the dragged
item enters the element.

How to drag any element

This is where the HTML5 spec added some new content to the
API. Enabling any element to be dragged is incredibly easy. Take
your div and add the new attribute: draggable . For example:
<div draggable="true">This element be draggable</div>
Of course I said incredibly. Well, it works in Firefox; any element
that has the draggable attribute can now be dragged around
the browser. Of course, since it's a new addition in HTML5, it
doesn't come as standard in IE, so forget about it working in IE.
Perhaps it will work in IE9 or later. More incredible is getting it
to work in Safari 4.
Although it's blindingly simple to enable any element to be
draggable using the draggable attribute, for reasons that are
still beyond this author and many other bloggers, to get any ele-
ment to drag in Safari 4 you need to give it a specifi c CSS style.
That's right, to enable a behaviour you need to defi ne a presen-
tational attribute. This has been fi xed in Safari 5 so the CSS isn't
required, but for it to work in older Safari versions, you need the
CSS. You must add the following CSS to target elements with
the draggable attribute:
[draggable] { -webkit-user-drag: element; }