[whatwg] Drag and drop in HTML5
ian at hixie.ch
Wed May 4 15:51:17 PDT 2005
I am currently working on trying to specify IE's (and now Safari's) drag
and drop API.
In IE, drag and drop is basically only supported for WYSIWYG editing use
cases: you can drag selections, images, and URLs.
That's fine. Those are a major use case which we need to support, and the
API is designed in a way that makes it easy to specify independent of
media or platform (the names may be media-specific, but, like the "click"
event, that's just to make developing for the platform easy, it's not
actually stopping those events from being used for slightly different
purposes in other media).
In Safari, you can also drag entire blocks. This is done by using a CSS
property, -khtml-user-drag I believe, which can take values that disallow
dragging, enable selection and image dragging, and enable whole-element
Now for Safari's use case this makes sense. Their target was
platform-dependent, media-specific widgets, with accessibility needs
addressed explicitly in the widget's code.
However, from an HTML point of view, it doesn't make sense. Having a style
property control application behaviour is wrong -- the fact that something
is draggable isn't going to change depending on what the skin is. It's not
even going to change based on the media -- something that's draggable (via
a mouse) on a visual UA is still going to be draggable when the user is
using an interactive aural agent (albeit with a radically different
interaction model probably involving explicitly picking two elements and
saying that the first is to be dragged to the second).
So there is currently no whole-element drag-and-drop API that we can
conveniently re-use. There are use cases though:
- Dragging items around in a visual representation. You drag little
ships in a game showing a visual representation of the game board
(for example, I really want to drag the fleet icons in VoidWars
www.voidwars.com). I could see you dragging icons around the map in
-- here it seems like we may want a specific element that represents a
"thing". There's more to this case than just dragging and dropping --
there is a media-dependent aspect as well. You're dropping to a
specific coordinate. Non-visual media are SOL if this is the only
way to interact with the application.
- Dragging items to classify them. I could see you dragging items from
a list of items in a shopping mall interface to a virtual shopping
cart, or dragging them out from there to a wishlist. Another example of
this is dragging cards (between piles) in a card game.
-- here it seems that we have a structure where one element contains a
set of other elements all of which are draggable, and all of which
can be dragged to specific other elements. Would it be enough to
just mark elements as drag-item-sources and drag-targets and say
that all the elements in d-i-sources can be dragged to d-targets?
- Dragging items around a list view or between list views.
-- here it seems like <datagrid> should just natively support drag and
drop, so we don't need much more here.
What other use cases are there? Are there any requirements I'm missing?
Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
More information about the whatwg