jquery ui sortable - 即使用户不更改订单，也会捕获订单

Question

我有一个动态创建的 div 元素列表，我事先不知道会有多少项，它们是在上一步中定义的。

我可以使用 jquery ui sortable 对它们进行排序没问题，当用户更改任何内容时，以下代码为我提供了我想要的排序顺序。 （只是在调试时打印出排序顺序，完成后将存储在数据库中。）

$(function() {
               update: function(event, ui) {
                  displayOrder = $(this).sortable('toArray').toString();
                  $("#sortable-result").text (displayOrder);
               }
            });
         });

这给了我在 csv 列表中期望的可排序元素字符串。

但是，如果用户不更改订单的任何内容，我还想存储显示顺序。 因为列表是动态创建的，我不一定知道哪些元素会在那里，所以我不能假设默认顺序。

所以我查看了 API 中的事件，并尝试修改以下代码。 create 事件似乎是唯一可以满足我需要的事件。

 $(function() {
            $('#sortable-fields').sortable({
               create: function(event, ui) {
                  displayOrder = $(this).sortable('toArray').toString();
                  $("#sortable-result").text (displayOrder);
               },
               update: function(event, ui) {
                  displayOrder = $(this).sortable('toArray').toString();
                  $("#sortable-result").text (displayOrder);
               }
            });
         });

但是，这只是给了我 'sortable-none' csv 字符串中的一个值。

如何在用户更改顺序和不更改顺序时获得可排序的列表顺序？

谢谢。

Answer 1

好吧，看了我自己的问题，我让这比它需要的更难。

我之前说过可排序列表是动态加载的。 如果它是动态加载的，这意味着我必须已经在变量中具有默认排序顺序，否则我将无法首先将它们放入可排序列表中！

我将把这个留在这里，以举例说明我如何实现这一目标的其他人也有类似的想法。

如果我的动态列表来自一些以前的 javascript/jquery：

$.each(SortableItemsArray,function(index, value){
// code to print out sortable elements html here.
$('#sortable-fields').append('some html here')

});


// more code...

$(function() {
               update: function(event, ui) {
                  displayOrder = $(this).sortable('toArray').toString();
                  $("#sortable-result").text (displayOrder);
               }
            });


// just use the SortableItemsArray var as the default order, as that is where the list came from in the first place.