splice() not updating items order of array within

Question

Following a prior post on how to update the order of an array. I followed the suggestion of Michael Best and used splice() to modify the ordering of my array on button click

self.moveup = function (itemIndex) {
    var i = self.itemList.indexOf(itemIndex); 
    if(i >= 1){
     var array = self.itemList();
        self.itemList.splice(i-1, 2, array[i], array[i-1]);
    } 

Where I am having trouble is in incrementing the items in the array. From reading the usage of Array Splice The first param indicates where the change should occur for moving up I would think that would be i+1 , the value 2 indicates how many items in the array would change so no change there and then the range I thought would be the selected item array[i] and the end would be [i+1] as I am increasing the position.

self.itemList.splice(i+1, 2, array[i], array[i+1]);

In the attached fiddler you can see the values increase but the items do not actually change order they are only replicating when you hit the down button. I expected the result to be the same as when calling moveUp.

I'd appreciate any pointers on what I am missing here. http://jsfiddle.net/rlcrews/SCWmk/5/

-cheers

Answer 1

Almost there. Here's how I did it.

When moving an item up, you need to swap it with the previous item. Thus, you need to replace the elements at indices i-1 and i with array[i] and array[i-1], respectively. Your moveup method does exactly that, so all is good.

Now, when moving an item down, you need to swap it with the next item. Thus, you replace the elements at indices i and i+1 with array[i+1] and array[i], respectively. Your code however changes the elements i+1 and i+2, which is no good. Instead, you should be doing:

self.itemList.splice(i, 2, array[i+1], array[i]);

You start splicing at i (as you're removing the elements at i and i+1) and you replace them (insert at that index) with array[i+1] and array[i].

On another note, your check for whether you can move the item down is incorrect. The only item you should not move down is the last item, i.e. the element at index self.itemList().length-1. Thus, the check should look like if (i < array.length - 1) { ... } (see the fiddle).