HTML and CSS Reference
In-Depth Information
Native Drop zones
No, we're not talking about the place where local parachutists land. There's a new
dropzone
attribute
available in the drag-and-drop specification. This can be applied to the area that you want to drop data
onto. The attribute accepts the following values:
copy
(the default),
move
, and
link
which control the
feedback to the dragged item. In addition to the feedback value, you can also include the accepted kinds
of data the drop zone supports. For example:
<div dropzone=”copy s:text/plain f:image/png”> Drop 'em on my head </div>
This would allow my script to copy any dragged content whose content type was either plain text or a
PNG image. The 's:' stands for string and 'f:' stands for file. Currently nothing else is supported in the spec.
I suspect that the idea is to remove the need for the
dragover
and
dragenter
shenanigans. However, as
there's absolutely no current browser support for this feature, I can't be entirely sure. It's certainly a move
in the right direction toward enhancing and simplifying the drag and drop API, but until we see it land in a
browser, I'm afraid this is just a glimpse of what drag and drop should be, rather than being useful today!
This uses the CSS attribute selector (the square brackets) to find
all the elements with the
draggable
property enabled, and then
applies the behaviour to enable the user to drag the element.
Aside from the CSS fudge that you have to add to kick Safari 4
into life, dragging any element isn't too hard, and it means you
can now create complicated objects in the DOM that the user
can move around and drop into other windows or applications.
Yo u c a n a d d y o u r o w n c u s t o m d r a g i c o n w h e n d r a g g i n g a n e l e -
ment. On the
dragstart
event, you can use the
setDragImage
method to associate your own image with the cursor at a spe-
cific offset to the regular cursor image.
There is, of course, a small caveat: It doesn't work in IE, and in
Safari, you can't override the cursor if dragging text, images, or
links. But we're optimistic—let's create our own custom drag icon:
var dragIcon = document.createElement('img');
// set the drag icon to the mini twitter logo
dragIcon.src = 'http://img.tweetimag.es/i/twitter_m';
// later in the code...
element.ondragstart = function (event) {
event.dataTransfer.setDragImage(dragIcon, -10, -10);
// and do some other interesting stuff with dataTransfer
};
