[whatwg] Drag and drop in HTML5

[Kornel Lesinski]

On Wed, 04 May 2005 23:51:17 +0100, Ian Hickson <ian at hixie.ch> wrote:

> So there is currently no whole-element drag-and-drop API that we can
> conveniently re-use. There are use cases though:

As a web developer I'd like:

- enabling/disabling dragging for each DOM element:

foo.draggable = true;

- event that "asks" if item can be dropped "here". Dragged item should
fire events on elements it hovers (like onmouseover) and response to this
event (preventDefault?) should control if mouse pointer looks 'forbidden'
or 'normal' accordingly.

foo.addEventListener('dragtarget',function(e) {if (this.isBusy)
e.preventDefault();},false);

If it can't be an event (above example doesn't look bulletproof to me),
less convenient method like specifying if element is allowed target may be
sufficient (foo.dragTarget = true)

- 'item dropped' event fired on target element

- :drag CSS pseudo-class is nice idea. There might be also :drag-target
(:drag:target?) pseudo-class that styles elements that "agreed" to be drag
target.

:drag {opacity: 0.5;}
:drag-target {outline: 2px dotted red;}


There is use-case of reordering items, which means dragging items in
between other items. That seems a bit more complex, and probably needs
additional helper API.

To implement this with simple interface I've proposed, events should be
handled either by existing elements (like list items that compare their
size and position of dragged element to decide whether element should be
dropped before or after) or handled by container that would probably need
to calculate positions of it's children and create new element to show
drop target. Smooth Mac-like drag'n'drop can be implemented by animating
drop target's padding/margin. So that's quite a bit of code that's going
to be reinvented each time someone implements reordering.

-- 
pozdrawiam, Kornel Lesinski