Question

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

<html>
   <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>  </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
      $(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

            }
         });
      });
  </script>

  </head>
  <body>
      <ul class="block" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
      <ul class="secondblock" type="none">
           <li id = "one">1</li>
           <li id = "two">2</li>
           <li id = "three">3</li>
           <li id = "four">4</li>
           <li id = "five">5</li>
      </ul>
  </body>

有没有可能的解决方案？

Answer 1

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

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

<ul class="block" type="none">
    <li id = "one">1</li>
    <li id = "two">2</li>
    <li id = "three">3</li>
    <li id = "four">4</li>
    <li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

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

$('.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
};

来源Move an array element from one array position to another

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

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

例如：

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

如果你只想在排序后让.secondblock匹配.block，你可以这样做：来源：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 }
});

将顺序设置为jquery可排序

2 个答案: