1

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

            $(".block").sortable({
            axis: 'y',
            update: function(event, ui) {// order changed
               var order = jQuery(this).sortable('toArray');
               // send this order to index.php and store it in db

            }
         });
      });
  </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>
  </body>

第二个文件是

<html>
  <head>
  <script>
         $('.secondblock').sortable({axis:'y'});
      // get order from index.php and set it to .secondblock

  </script>
  </head>
    <body>
     <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>
 </html>

有没有可能的解决方案？

4

1 回答 1

5

如果您不想在我评论过的链接上使用该解决方案，您可以使用它，更简单：

function reorder(orderArray, elementContainer)
{
    $.each(orderArray, function(key, val){
        elementContainer.append($("#"+val));
    });
}

orderArray：一个包含所有 id 的数组，按你想要的顺序排列（正是sortable("toArray")返回的内容）

elementContainer：是包含您的可排序项目的 jQuery 对象。

这里有一个工作示例：http:
//jsfiddle.net/ecP5k/1/

于 2012-08-09T04:24:23.613 回答