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
