script.aculo.us – Sortable.create move Element Up and Down with Arrows – Community

Hi folks!

Yep, I’m a script.aculo.us disciple, too. To enhance the usability of my WordPress plugins I integrated a drag and drop list in GeneralStats and TimeZoneCalculator. As it is sometimes not possible, for example due to handicaps or technical difficulties, to conduct drag and drop operations, I additionally thought about arrows on each list element which provide a re-ordering functionality.

Screenshot GeneralStats

There is not method available in the standard script.aculo.us package and the proposal on up / down buttons on the script.aculo.us wiki seemed inefficient, as the list elements are cloned and therefore recreated every time the list is re-ordered. Hence memory usage can be decreased by reordering only the sequence. edit 2008-09-28: the script.aculo.us wiki has moved and the post I’ve referred to does not exist anymore.

In the next paragraphs I provide the code snippets and a full working example of my solution. – comments and feedback are welcome…

have fun!
berny

move Element up

/*
moves an element in a drag and drop list
one position up
*/

function moveElementUpforList(list, key) {
  var sequence=Sortable.sequence(list);
  var newsequence=[];
  var reordered=false;

  //move only, if there is more than one element in the list
  if (sequence.length>1) for (var j=0; j<sequence.length; j++) {

    //move, if not already first element, the element is not null
    if (j>0 &&
      sequence[j].length>0 &&
      sequence[j]==key) {

      var temp=newsequence[j-1];
      newsequence[j-1]=key;
      newsequence[j]=temp;
      reordered=true;
    }

    //if element not found, just copy array
    else {
      newsequence[j]=sequence[j];
    }
  }

  if (reordered) Sortable.setSequence(list,newsequence);
    return reordered;
  }
}

move Element down

/*
moves an element in a drag and drop list
one position down
*/

function moveElementDownforList(list, key) {
  var sequence=Sortable.sequence(list);
  var newsequence=[];
  var reordered=false;

  //move, if not already last element, the element is not null
  if (sequence.length>1) for (var j=0; j<sequence.length; j++) {

    //move, if not already first element, the element is not null
    if (j<(sequence.length-1) &&
      sequence[j].length>0 &&
      sequence[j]==key) {

      newsequence[j+1]=key;
      newsequence[j]=sequence[j+1];
      reordered=true;
      j++;
    }

    //if element not found, just copy array
    else {
      newsequence[j]=sequence[j];
    }
  }

  if (reordered) Sortable.setSequence(list,newsequence);
    return reordered;
  }
}