Jquery-ui Sortable with js list maker from array 无法正常工作

Question

所以我正在尝试实现一个可排序的列表。但是，该列表是使用 JavaScript 从数组中生成的。这个数组来自后端c#。

这是我的可排序 jquery -

       $('.sortable-list').sortable({
            connectWith: '.sortable-list',
            update: function (event, ui) {
                var changedList = this.id;
                var order = $(this).sortable('toArray');
                var positions = order.join(';');
                success: writeCategories(positions);
                console.log("positions written");
            },

        });

这是我的生成列表的 JavaScript 函数...

    function makecategories(array) {
            // Create the list element:
            var list = document.createElement('ul');
            list.id = "boo";
            list.className = "sortable-list ui-sortable";

            for (var i = 0; i < array.length; i++) {
                // Create the list item:
                var item = document.createElement('li');
                item.id = i + 1;
                item.className = "ui-sortable-handle";
                item.style = '"margin: 1px; width: 130px; padding: 2px; vertical - align: middle;"';


                // Set its contents:
                item.appendChild(document.createTextNode(array[i]));

                // Add it to the list:
                list.appendChild(item);
            }

            // Finally, return the constructed list:
            return list;
        }

这是我从后端获取数组并调用我的 JS 函数的方法

     var categories = <%= this.javaSerial.Serialize(this.Menus) %>;

        //alert(categories[3]);
        document.getElementById('categories').appendChild(makecategories(categories));

这是我的 HTML

    <div id="categories">
    </div>

这是我得到的结果-

    Hen
    Dog
    Cat

但是这个列表是不可排序的。在这里的任何帮助将不胜感激。

这是我尝试过的-

    <div id="categories">
        <ul class="sortable-list">
            <li id="1"> Food </li>
            <li id="2"> Drinks </li>
        </ul>
    <div>

这给了我一个结果-

    Food
    Drinks
    
    Hen
    Dog
    Cat

其中食物和饮料列表是可排序的，而母鸡猫列表是不可排序的。

请随时向我询问更多可能需要的信息。

Answer 1

考虑下面的例子。

$(function() {
  function makeSortList(arr, obj) {
    if (obj == undefined) {
      obj = "body";
    }
    obj = $(obj);
    var list = $("<ul>", {
      id: "boo",
      class: "sortable-list"
    });

    $.each(arr, function(i, v) {
      $("<li>", {
        id: i + 1
      }).html(v).css({
        margin: "1px",
        width: "130px",
        padding: "2px",
        verticalAlign: "middle"
      }).appendTo(list);
    });

    list.appendTo(obj).sortable({
      connectWith: '.sortable-list',
      update: function(e, ui) {
        var changedList = $(this).attr("id");
        var order = $(this).sortable('toArray');
        var positions = order.join(';');
        //success: writeCategories(positions);
        console.log("positions written", positions);
      }
    });

    return list;
  }

  makeSortList(["Cat 1", "Cat 2", "Cat 3"], "#categories");
});

.sortable-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="categories"></div>

您可以看到这会从 Array 项创建 List，然后在添加后初始化 Sortable。