AJAX - The Complete Reference

PART II

Chapter 8: User Interface Design for Ajax 375

CSS is used to set the cursor of the draggable items as well as specify a z-index so that

we are able to deal with the moving a bit easier.

.draggable{ position:relative;

z-index:2;

cursor:move; }

Now when the user clicks the mouse on an item, dragDropStart() is the same as

before but the dragDropMove() function is a bit more complicated. As before, the position

of the relevant object is found. However, in this case, all the list items near the current

position must be located as well.

function dragDropMove(e, obj)

{

e = fixE(e);

var position = getPosition(e);

var y = position.y - yOffset;

obj.style.top = y + "px";

var parent = obj.parentNode;

var next = obj.nextSibling;

while(next != null && (!next.tagName || next.tagName.toUpperCase()

!= "LI"))

next = next.nextSibling;

var previous = obj.previousSibling;

while(previous != null && (!previous.tagName || previous.tagName

.toUpperCase() != "LI"))

previous = previous.previousSibling;

Each of these list items can be considered similar to a drop zone, but this time it is a

matter of simply being over them. If the user drags the item over the previous or next

sibling in the list, the two items swap places in order to show the propagation of the items

up or down the list. To figure this out, the trusty within() function is used to determine if

the dragged item is on the next or previous item in question. If it is, a number of DOM steps

are performed to change the order of the items.

if (next != null)

{

if (within(e, next))

{

var offsetTop = next.offsetTop;

next = next.nextSibling;

while(next != null && (!next.tagName || next.tagName.toUpperCase()

!= "LI"))

next = next.nextSibling;

parent.removeChild(obj);

obj.style.top = "0px";

if (next)

{

parent.insertBefore(obj, next);

var offsetDiff = obj.offsetTop - next.offsetTop ;

}