2

我对无序列表（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>

有没有可能的解决方案？

4

2 回答 2

5

首先，您不应该让相同的 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/

于 2012-08-08T18:01:42.597 回答
1

浮士德对我来说更好看。标记它，如果它是你想要的。

是的。我觉得我需要更多信息，但最近我不得不做几乎完全相同的事情。

首先，您想使用排序算法扩展 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，您可以这样做：来源：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 }
});
于 2012-08-08T17:48:53.070 回答