Personal tools

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
}

Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.