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

Posted 2023-05-08

【中文标题】Jquery-ui Sortable with js list maker from array 无法正常工作

【英文标题】：Jquery- ui Sortable with js list maker from array not working properly

【发布时间】：2021-01-28 00:27:35

【问题描述】：

所以我正在尝试实现一个可排序的列表。但是，该列表是使用 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

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

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

【问题讨论】：

在 sortable 中，您引用 success，不确定您要使用它做什么。

哦，有一次，我得到了排序列表，我从后端调用函数 writeCategories() 并传递排序后的数组位置。该函数将排序后的数组写入json文件

你能指出你到底面临什么问题，因为我在小提琴中试过你的代码，它似乎工作。 fiddle

@sandeepjoshi 当我从 c# 中提取数组时，它是不可排序的！但是 Twisty 帮我解决了这个问题。所以，谢谢

【参考方案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。

【讨论】：

天哪！这是天才，谢谢:)