jQuery.sortable。通过JavaScript更改顺序

时间:2010-01-14 21:10:53

标签: jquery html sorting html-lists

如何在JavaScript jQuery.sortable应用后更改列表的顺序。

例如:

<ul id="mylist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

var x_sortable_list = $("mylist").sortable();

然后,假设这个工作:

x_sortable_list.changeOrder([
 {item:1, newOrder:2 },
 {item:2, newOrder:1 },
 {item:3, newOrder:3 }
]);

3 个答案:

答案 0 :(得分:16)

与其他人提到的一样,这与sortable()功能无关。相反,您需要检索列表中的项目,转移其位置,然后按新的顺序清除并重新插入列表项:

// Get your list items
var items = $('#mylist').find('li');

// The new index order for each item
var order = [4, 2, 0, 1, 3];

// Map the existing items to their new positions        
var orderedItems = $.map(order, function(value) {
    return items.get(value);
});

// Clear the old list items and insert the newly ordered ones
$('#mylist').empty().html(orderedItems);

答案 1 :(得分:11)

正如Sparr所说,没有办法直接使用sortable对它们进行排序,但你仍然可以用以下方式手动移动它们:

$("#mylist li:eq(1)").insertAfter($("#mylist li:eq(2)"));

答案 2 :(得分:1)

sortable提供用于重新排列项目的用户界面。要以编程方式重新排列它们,您仍然需要自己手动或使用其他插件来操作元素。