HTML and CSS Reference
In-Depth Information
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 full-fledged application,
you need to consider your options. Perhaps you don't support all
those formats. Perhaps you support only one compatible format.
Perhaps you don't even support drag and drop.
There are proposals to fix 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're
seven drag-and-drop
events. You've seen
dragenter
,
dragover
,
drop
, and
dragstart
. The others are
dragend
(the complement to
dragstart
),
dragenter
, and
dragleave
. The enter and
leave events fire on the drop
zone as the dragged item enters
the 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 easy. 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 there. Perhaps it will work in IE9 or later. More incred-
ible 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 specific CSS style.
That's right, to enable a behaviour you need to define a presen-
tational attribute. This has been fixed in Safari 5 so the CSS isn't
required, but for older Safari versions you'll need the following
CSS to target elements with the
draggable
attribute:
[draggable] { -webkit-user-drag: element; }
