Question

我的网站上有一个列表。我正在使用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 -->

而且我知道也可以分配一个在排序停止时触发的回调函数：

$( ".selector" ).sortable({
   stop: function(event, ui) { ... }
});

谢谢！

Answer 1

5年前我写了这个问题的答案，但答案很糟糕（这个问题有近38,000个观点），所以这里有一个改进的答案。

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

响应排序顺序的变化（步骤1）

我们需要解决的第一个问题是对排序元素顺序的变化做出反应。如果我们查看jQuery UI可排序窗口小部件的documentation，我们会看到它有一个change事件，只要排序顺序发生变化就会触发，并且非常适合我们的需求。

附注：我的原始答案使用的是stop，而不是change事件。 change更好（至少在这种情况下），因为它会报告排序中的所有更改，无论更改是交互式（用户）还是程序化，并且仅在订单实际更改时。另一方面，sort事件仅在用户停止排序（释放鼠标或抬起手指）时触发。

使用sort事件，我们现在可以响应排序中的更改。以下内容将为我们初始化Sortable小部件，并允许我们在sort甚至触发时设置要调用的函数：

var $sortableList = $("#your-list");

var sortEventHandler = function(event, ui){
    console.log("New sort order!");
};

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

// You can also set the event handler on an already existing Sortable widget this way:

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

完成后，我们现在准备采取第2步：

检索已排序的元素（步骤2）

这部分相当简单。我们只需要在排序列表中获取元素数组。为此，我们可以使用jQuery函数ul来询问children()（list）元素的子元素：

var listElements = $sortableList.children();

console.log(listElements); // [ <li>, <li>, ... ]

很好，但我们特别需要元素的值：

var listValues = [];

listElement.forEach(function(element){
    listValues.push(element.innerHTML);
});

console.log(listValues); // [ "Item 1", "Item 2", ... ]

使用.sortable("toArray")或.serialize()也是选项。

尼斯！到最后一点。

序列化＆amp;发送新的排序顺序（步骤3）

序列化是“将数据结构或对象状态转换为可以存储的格式（例如，在文件或内存缓冲区中，或通过网络连接链接传输）的过程”（感谢Wikipedia！）

你如何做到这一点很大程度上取决于你的具体需求，所以我们将讨论一些你可以使用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>

更新item输入：

var serializedValue = $.param(listValues);

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

发送：

$("#ourForm").submit()

旧答案：

HTML：

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

JavaScript的：

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

在save_order.php中，您可以解析POST变量“new_order”并获取第1项，第2项，第3项等的订单。

Answer 2

尝试使用serialize格式化字符串以发送到数据库更新脚本。

http://jsfiddle.net/zFQ2j/

http://docs.jquery.com/UI/Sortable#method-serialize

Answer 3

这可能会有所帮助：

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

Answer 4

2018年5月

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

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

JS：

$( 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]);
      }

    }
  });

});

DEMO和Credits： http://www.tutorialspark.com/jqueryUI/jQuery_UI_Sortable_Getting_Order_of_Sortable.php

Answer 5

易于解决：

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        var order_id = jQuery_2(ui.item).index();
        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

var order_id = jQuery_2（ui.item）.index（）; //获取订单

Answer 6

您可以：

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        //var order_id = jQuery_2(ui.item).index();
        var order_id = [];

        $("#sort"+status_id+" li").each(function(index) {
            order_id.push($(this).attr('data-task-id'));
        });

        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

Answer 7

这就是我使用事件处理程序捕获排序事件，然后通过ToArray函数获取排序后的值并循环遍历这些值并分配给数组的方式。然后，您可以将该数组传递给Ajax post

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

Answer 8

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        //var order_id = jQuery_2(ui.item).index();
        var order_id = [];

        $("#sort"+status_id+" li").each(function(index) {
            order_id.push($(this).attr('data-task-id'));
        });

        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

在度假后获取jQuery可排序列表中的列表项的顺序

8 个答案:

响应排序顺序的变化（步骤1）

检索已排序的元素（步骤2）

序列化＆amp;发送新的排序顺序（步骤3）

旧答案：