[whatwg] Drag and drop in HTML5

[Brad Fults]

On 5/4/05, Ian Hickson <ian at hixie.ch> wrote:
> 
> As far as editing goes, contentEditable="" is the way we're going at the
> moment, I think. Focusable is probably going to be tabindex="".
> Selectable hasn't yet been discussed (I could be convinced that that is
> presentational, actually). Draggable is clearly not presentational; my
> current thinking is something like contentDraggable="" or something.


I don't really see a case outside the datagrid dragging (which is handled 
elsewhere) where there would be a need to specify an element as draggable or 
as a drag target without scripting in drag behavior. In light of this, I 
don't see any reason to pollute the HTML namespace with more attributes 
(contentDraggable) when this will necessarily be a scripted event anyway. 
Please feel free to point out cases where another HTML attribute would have 
an advantage over a DOM property that could be set directly via script.

As for the dragging event model for a single DOM element, I think the events 
outlined in the current draft of the spec are a good start. In addition, 
however, it would be nice to add some presentational niceties via CSS 
pseudo-classes.

:draggable = DOM element that has .draggable=true (or whatever is decided 
on)
:dragging = DOM element that is being dragged (perhaps opacity: 0.5)
:dragging:droppable = DOM element that is being dragged and can be dropped 
over its current location
:dragtarget / ? = container that allows for the current dragging element to 
be dropped upon it (border: 2px dotted red)
:dragged = the original DOM element that was dragged, in its original 
position (it would be up to script to determine whether or not to remove it 
or whatever else)

I think something along these lines is invaluable to a rich GUI interface.

Drag groups could be specified by a simple NodeList that would be defined at 
dragstart.

e.g.
var elDrag = document.getElementById("mydragelement");
var myNodeList = [];
myNodeList.push(document.getElementById("dragfriend1"));
myNodeList.push(document.getElementById("dragfriend2"));
// or just as easily: var myNodeList = document.getElementsByTagName("LI");
elDrag.addEventListener("dragstart", function(e) { 
e.dragNodes.appendChildren(myNodeList); return true; }, false);

For the droppable model, it makes sense to have the drag target element 
specify either Elements or NodeLists that are droppable.

e.g.
var elDragTarget = document.getElementById("mydragtarget");
elDragTarget.addDroppable(elDrag);
elDragTarget.addDroppable(myNodeList);

Then the question comes about dragging a group of elements to a drag target 
which only has *some* of the dragged elements in its droppable list. Without 
thinking about it too much, I think this could be handled when the elements 
are dropped as such:

elDrag.addEventListener("dragend", function(e) {
// go through each dropped element and check if it's droppable on the drag 
target
for (var i=0; i < e.dragNodes.length; i++)
if ( !dragTarget.isDroppable(e.dragNodes[i]) ) alert("Unabled to drag 
"+e.dragNodes[i].id+" to "+dragTarget.id);
// of course something more graceful than an alert could be done

return true;
}, false);

Anyway, most of it is food for thought.

-- 
Brad Fults
NeatBox
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20050506/cf35eaa6/attachment-0001.htm>