jQuery ui无法与数组中的js列表生成器一起排序，无法正常工作

问题描述

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

这是我的Sortable 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

除此之外，食物和饮料清单是可排序的，而母犬猫清单是不可排序的。

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

解决方法

请考虑以下示例。

$(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。