JavaScript Reordering or Swapping Elements

Using JavaScript, you can swap or reorder elements on your page.

Let’s assume you have a parent element, a source element, and a target element. Use the following code to swap elements on your page.

var x = target.style.left;
var y = target.style.top;
parentElement.insertBefore(src, target);
src.style.left = x;
src.style.top = y;

Now, lets say you also need to reorder the position of the records in the database.  Let’s assume that each record has a position field.  Use the following pseudocode:

$pos1 = // the source record position
$pos2 = // the target record position

if ($pos1 < $pos2) {
// item moved down

UPDATE todo SET position = 0 WHERE position = $pos1

UPDATE todo SET position = position - 1 WHERE position > $pos1 AND position < $pos2

$newpos = $pos2 - 1;
UPDATE todo set position = $newpos WHERE position = 0
}
else
{
// item moved up

UPDATE todo SET position = 0 WHERE position = $pos1

UPDATE todo SET position = position + 1 WHERE position < $pos1 AND position >= $pos2

UPDATE todo set position = $pos2 WHERE position = 0
}