DL said:
Rumor has it that some implementation of HTML5's drag and drop is very
clumsy. Let's ignore that for now.
OK. It would be worthwhile to hear some discussion the shortcomings. We
can proceed without, that, though.
Say, we have we have 5 or 6 DIV (s) in a page or 5 or 6 or more TD in
a TR, what might be an elegant way to drag the DIV (s) or TD (s) to re-
arrange the DIV (s) or TD (s)?
DIV can have left/top style value applied. TD cannot.
A general approach is:
Add a callback for mousedown on document.
Add a callback for mousemove on document
Add a callback for mouseup on document.
mousedown: if the element the user clicked or one of its ancestors is
something that can be dragged, set the activeDragObject to that.
mousemove:
1) if there is no activeDragObject, return.
2) move the activeDragObject by the difference from where mousedown
occurred and the cursor position. The cursor position
is e.pageX[1] or (e.clientX[2] + scroll offsets[3][4]).
mouseup: set activeDragObject = null.
That is basically the idea to use. IFRAMEs can make things harder.
A general outline might look like:-
function mousedownHandler(ev) {
var target = getEventTarget(ev),
draggable = findDraggableAncestor(target);
if(draggable) {
activeDragObject = draggable;
}
}
function mousemoveHandler(ev) {
if(!activeDragObject) return;
var coords = getEventCoords(ev),
ePageX = eventCoords.x, ePageY = eventCoords.y,
distX = ePageX - mousedownX,
distY = ePageY - mousedownY;
}
function mouseupHandler(ev) {
activeDragObject = null;
}
function findDraggableAncestor(target) {
var closestAncestor = document.body;
for(var x = target; x !== closestAncestor; x = x.parentNode) {
if(matchesDragCriteria(x)) {
return x;
}
return null;
}
function getEventCoords(ev) {
var coords = { x : 0, y : 0 };
// find e.pageX/e.pageY or
// (e.clientX/e.clientY + scroll offsets);
return coords;
}
Then, maybe, we could consider to drag a DIV to a trash bin for
removal as well ...
Is the trash bin on the same page?
Primarily browsers to be supported at this point is IE7 and FF3.5.
Why so limited? There is no reason this could not work in older versions
of Firefox, Opera, versions of Webkit. iPhone, too, with very little
extra work.
Blackberry - I need to investigate further, for latest touch screens.
Palm Pre - I think it is not possible.
[1]
https://developer.mozilla.org/En/DOM/Event.pageX
[2]
http://msdn.microsoft.com/en-us/library/ms533567(VS.85).aspx
[3]
http://msdn.microsoft.com/en-us/library/ms534617(VS.85).aspx
[4]
https://developer.mozilla.org/en/DOM/window.pageXOffset