[whatwg] Drag and drop in HTML5

[Ian Hickson]

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 
dragging.

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
  Google Maps.

  -- 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.   `._.-(,_..'--(,_..'`-.;.'