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

Question

我的网站上有一个列表.我正在使用jQuery的可排序教程,使用户能够更改列表项的顺序.

http://jqueryui.com/demos/sortable/

诀窍是我想在度假村后立即捕获项目的顺序,并将订单值分配给隐藏的表单元素,这些元素将通过表单提交传递给我的服务器,我可以使用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可排序窗口小部件的文档,我们会发现它有一个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)

这部分很简单.我们只需要在排序列表中获取元素数组.为此,我们可以ul使用jQuery函数询问(list)元素的子元素children():

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()也是选项.

太好了!到最后一点.

序列化并发送新的排序顺序(步骤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]);
      }

    }
  });

});

演示和积分：http : //www.tutorialspark.com/jqueryUI/jQuery_UI_Sortable_Getting_Order_of_Sortable.php