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 u
Although the answer by Azatoth works fine, bobby might be looking for an animation, like I did. so I wrote the following code to make the movement animated:
function moveUp(item) {
var prev = item.prev();
if (prev.length == 0)
return;
prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
prev.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertBefore(prev);
});
}
function moveDown(item) {
var next = item.next();
if (next.length == 0)
return;
next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
next.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertAfter(next);
});
}
you can take a look in here http://jsfiddle.net/maziar/P2XDc/