Javascript 获取jQuery可排序列表中列表项的顺序

我的网站上有一个列表。我使用jQuery的可排序教程为用户提供更改列表项顺序的能力

诀窍是，我想在度假后立即捕获项目的顺序，并将顺序值分配给隐藏的表单元素，这些元素将通过表单提交传递给我的服务器，在表单提交中，我可以使用php脚本将新的元素顺序保存到数据库中

以下是演示的源代码：

 <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

谢谢

5年前我写了一个关于这个问题的答案，但是这个答案很糟糕（这个问题有将近38000个视图），所以这里有一个改进的答案

这个问题基本上有三个部分需要解决。我们来看看这三个

响应排序顺序的更改（步骤1） 我们需要解决的第一个问题是对排序元素顺序的变化做出反应。如果我们查看jQueryUISortable小部件，就会发现它有一个事件，每当排序顺序改变时就会触发，这非常适合我们的需要

旁注：我的原始答案使用了

stop

而不是

change

事件<代码>更改更好（至少在本例中是这样），因为它将报告排序中的所有更改，无论更改是交互式的（用户）更改还是编程更改，并且仅当顺序实际更改时才报告。另一方面，

sort

事件仅在用户停止排序（释放鼠标或抬起手指）时触发

使用

sort

事件，我们现在可以响应排序中的更改。以下内容将为我们初始化一个

Sortable

小部件，并允许我们设置当

sort

偶数触发时调用的函数：

var$sortableList=$（“#您的列表”）；
var sortEventHandler=函数（事件，用户界面）{
log（“新排序顺序！”）；
};
$sortableList.sortable({
站住：索特文坦德勒
});
//您还可以通过以下方式在已存在的可排序小部件上设置事件处理程序：
$sortableList.on（“sortchange”，sortEventHandler）；

完成后，我们现在准备开始第2步：

检索已排序的元素（步骤2） 这一部分相当简单。我们只需要在我们的排序列表中获得一个元素数组。为此，我们可以使用jQuery函数

children（）

（list）来请求

ul

（list）元素的子元素：

使用或也是选项

很好！最后一点

序列化并发送新的排序顺序（步骤3） 序列化是“将数据结构或对象状态转换为可存储格式（例如，在文件或内存缓冲区中，或通过网络连接链路传输）的过程”（谢谢！）

如何实现这一点在很大程度上取决于您的具体需求，因此我们将只讨论使用jQuery实现这一点的一些方法

AJAX:

如果我们使用AJAX，我们就可以用新订单向服务器发出请求。jQuery将自动为我们处理序列化

listValues

：

$.post("your-server.com/save_order", { "items": listValues } );

或者，如果您更喜欢JSON：

$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );

表格

创建一个表单：

<form action="your-server.com/save_order" method="POST">
    <input name="items" value="" />
</form>

发送：

$("#ourForm").submit()

旧答案： HTML:

---

在save_order.php中，您可以解析POST变量“new_order”并获取项目1、项目2、项目3等的顺序。

尝试使用

序列化

格式化字符串以发送到数据库更新脚本

这有助于：

alert($( "#sortable" ).sortable( "toArray" ).toSource());

2018年5月

此Javascript示例将在每次排序完成时为您提供#sortableContainer中的所有div列表

<div id="sortableContainer">
   <div id="Element1" class="sortIt">Item 1</div>
   <div id="Element2" class="sortIt">Item 2</div>
   <div id="Element3" class="sortIt">Item 3</div>
   <div id="Element4" class="sortIt">Item 4</div>
</div>

项目1
项目2
项目3
项目4

JS:

$（函数（）{
$（“#可排序容器”）.sortable({
停止：功能（事件、用户界面）{
var itemOrder=$（'#sortableContainer'）。可排序（“toArray”）；
对于（变量i=0；i

演示和学分： 易于解决：

jQuery_2（函数（）{
var url='planner/planner/edit_status/'；
jQuery_2（'ul[id^=“sort”]”）。可排序({
连接到：“.sortable”，
/*接收：功能（e、ui）{
var status_id=jQuery_2（ui.item）.parent（“.sortable”）.data（“status id”）；
var task_id=jQuery_2（ui.item）.data（“任务id”）；
jQuery_2.ajax({
url:url，
方法：“POST”，
数据：{status\u id:status\u id，task\u id:task\u id，}，
成功：函数（响应）{}
});
},*/
更新：功能（e、ui）{
var status_id=jQuery_2（ui.item）.parent（“.sortable”）.data（“status id”）；
var task_id=jQuery_2（ui.item）.data（“任务id”）；
var order_id=jQuery_2（ui.item）.index（）；
jQuery_2.ajax({
url:url，
方法：“POST”，
数据：{status\u id:status\u id，task\u id:task\u id，order\u id:order\u id，}，
成功：函数（响应）{}
});
}
}).disableSelection（）；
} );，您可以：


jQuery_2（函数（）{
var url='planner/planner/edit_status/'；
jQuery_2（'ul[id^=“sort”]”）。可排序({
连接到：“.sortable”，
/*接收：功能（e、ui）{
var status_id=jQuery_2（ui.item）.parent（“.sortable”）.data（“status id”）；
var task_id=jQuery_2（ui.item）.data（“任务id”）；
jQuery_2.ajax({
url:url，
方法：“POST”，
数据：{status\u id:status\u id，task\u id:task\u id，}，
成功：函数（响应）{}
});
},*/
更新：功能（e、ui）{
var status_id=jQuery_2（ui.item）.parent（“.sortable”）.data（“status id”）；
var task_id=jQuery_2（ui.item）.data（“任务id”）；
//var order_id=jQuery_2（ui.item）.index（）；
变量顺序_id=[]；
$（“排序”+状态id+“li”）。每个（函数（索引）{
订单id.push（$（this.attr（'data-task-id'））；
});
jQuery_2.ajax({
var serializedValue = $.param(listValues);

$("#ourForm > input").val(JSON.encode(listValues));

$("#ourForm").submit()

<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>

$(".selector").sortable({
    stop: function(event, ui) {
        var data = "";

        $("#sortable li").each(function(i, el){
            var p = $(el).text().toLowerCase().replace(" ", "_");
            data += p+"="+$(el).index()+",";
        });

        $("form > [name='new_order']").val(data.slice(0, -1));
        $("form").submit();
    }
});

alert($( "#sortable" ).sortable( "toArray" ).toSource());

<div id="sortableContainer">
   <div id="Element1" class="sortIt">Item 1</div>
   <div id="Element2" class="sortIt">Item 2</div>
   <div id="Element3" class="sortIt">Item 3</div>
   <div id="Element4" class="sortIt">Item 4</div>
</div>

$( function() {
  $( "#sortableContainer" ).sortable({

    stop: function(event, ui) {

      var itemOrder = $('#sortableContainer').sortable("toArray");

      for (var i = 0; i < itemOrder.length; i++) {
        console.log("Position: " + i + " ID: " + itemOrder[i]);
      }

    }
  });

});

    var $sortableList = $("#sortable");

var sortEventHandler = function(event, ui){
    var sortedIDs = $( "#sortable" ).sortable( "toArray" );
                var listValues = [];
                for (var i = 0; i < sortedIDs.length; i++) {

                listValues.push(sortedIDs[i]);
      }
            console.log(listValues);
};

$sortableList.sortable({
    stop: sortEventHandler
});

$sortableList.on("sortchange", sortEventHandler);