Personal tools
Home Webmaster Resources JavaScript JavaScript Reordering or Swapping Elements

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.