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(){

            $(".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>

有没有可能的解决方案？

Answer 1

如果你不想在我评论的链接上使用该解决方案，你可以使用这个，更多更简单：

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

orderArray ：一个数组，其中包含您想要的所有ID ^{（确切地说 sortable（“toArray”）返回的内容）}

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

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

获取项目的顺序jquery可排序并为它们设置顺序

1 个答案: