jQuery Sortable Move UP/DOWN Button

bobby picture bobby · Jun 1, 2010 · Viewed 29.9k times · Source

I currently have a jQuery sortable list working perfectly. I am able to move the 'li' elements around. However, how can I make a button to move a specific 'li' element up by one and the one above to move down (and of course the opposite for a down button)? I have looked around google and found very little. Even a link would be fantastic!

Thanks!

Answer

azatoth picture azatoth · Jun 1, 2010

If you have following html code:

<button id="myButtonUp">myButtonTextForUp</button>
<button id="myButtonDown">myButtonTextForDown</button>
<ul>
  <li>line_1</li>
  <li>line_2</li>
  <li>line_3</li>
</ul>

I assume you have allready something to mark each lis, so following I assume the marked lihas the class markedLi; Following code should in theory move that element up or down (totally untested off course):

$('#myButtonUp').click(function(){
  var current = $('.markedLi');
  current.prev().before(current);
});
$('#myButtonDown').click(function(){
  var current = $('.markedLi');
  current.next().after(current);
});