获取项目的顺序jquery可排序并为它们设置顺序(get order of items jquery sortable and set order to them)

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

有没有可能的解决方案？

I use jquery draggble function for unorderd list (ul) and face a problem of getting the order of items after it changed and setting the order ofter page is loaded.Suppose we have the following code :

<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>

and the second file is

<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>

Are there any possible solutions?

最满意答案

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

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

orderArray ：一个包含所需顺序的所有id的数组（究竟是什么可排序（“toArray”）返回）

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

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

If you don't want to use that solution on the link I've commented, you can use this, much simpler:

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

orderArray: an array containing all ids in the order you want ( exactly what sortable( "toArray") returns)

elementContainer: is the jQuery object which contains your sortable items.

A working example here: http://jsfiddle.net/ecP5k/1/

更多推荐