将顺序设置为jquery可排序

我对无序列表（ul）使用jquery draggble函数，并且面对在更改后设置项目顺序的问题并且设置了页面的加载顺序。假设我们有以下代码：

       $(document).ready(function(){ $('.secondblock').sortable({axis:'y'}); $(".block").sortable({ axis: 'y', update: function(event, ui) {// order changed var order = jQuery(this).sortable('toArray'); // set this order to .secondblock } }); });    
 
1
 
2
 
3
 
4
 
5
 
 
 
1
 
2
 
3
 
4
 
5
 
  

有没有可能的解决方案？

Answer 1

首先，您不应该在文档中出现两次相同的ID。 那会引起各种各样的问题。

而是在第二个列表中的项目上设置数据属性以反映第一个列表中的相应项目：

 
 
1
 
2
 
3
 
4
 
5
 
 
 
1
 
2
 
3
 
4
 
5
  

然后反映第二个列表中第一个列表的排序很简单：

 $('.block').sortable({update: sortOtherList}); function sortOtherList(){ $('.block li').each(function(){ $('.secondblock [data-block-id=' + $(this).attr('id') + ']') .remove() .appendTo($('.secondblock')); }); } 

看到它在这里工作： http ： //jsfiddle.net/6HKZG/2/

Answer 2

浮士德对我来说看起来更好。 标记它是否是你想要的。

是。 我觉得我需要更多的信息，但最近我必须完成同样的事情。

首先，您希望使用排序算法扩展javascript数组对象。 这是我使用的：

 Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { var k = new_index - this.length; while ((k--) + 1) { this.push(undefined); } } this.splice(new_index, 0, this.splice(old_index, 1)[0]); return this; // for testing purposes }; 

source 将数组元素从一个数组位置移动到另一个数组位置

然后，我要做的是使用它和OldPosition / NewPosition函数来获取排序前后元素的索引，并使用此方法移动数组中的对象。

我认为JQuery排序让你在排序之前和之后获得有关数组的信息

例如：

 $('li').presort(function() { window.oldindex = $(this).index(); }); $('li').postsort(function() { window.newindex = $(this).index(); array.move(oldindex,newindex); }); 

如果你只是想在排序后使.secondblock匹配.block ，你可以这样做：source： http ： //jqueryui.com/demos/sortable/#events

 $( ".selector" ).sortable({ start: function(event, ui) { //Get the order of the .block list items before dragging } }); $( ".selector" ).sortable({ stop: function(event, ui) { //Get the new order of the list items after dragging. Compare the two orders and sort .secondblock to match block } });