使用 jQuery UI 可排序插件添加项目后刷新列表答案

【问题标题】：Refresh list after adding an item with jQuery UI sortable plugin使用 jQuery UI 可排序插件添加项目后刷新列表
【发布时间】：2014-04-28 22:28:20
【问题描述】：

好吧，所以我有一个嵌套的可排序列表，因此每个项目既是容器又是可排序元素。

我面临的问题是，每当我添加一个新元素时，我希望 jQuery 用新项目刷新其内部状态。根据文档，必须调用作为参数“刷新”传递的可排序方法，但我仍然无法使其工作。

示例代码： http://jsfiddle.net/X5sBm/

JavaScript：

$(document).ready(function() {
    var list = $('#mycontainer ul').sortable({
        connectWith: '#mycontainer ul',
        placeholder: 'myplaceholder'
    });

    function addElement(text) {
        $('#mycontainer > ul').append('<li>' + text + '<ul></ul></li>');
        list.sortable('refresh');
    }

    addElement('yolo');
});

HTML：

<div id="mycontainer">
    <ul>
        <li>
            Some text
            <ul>
            </ul>
        </li>
        <li>
            Some text 2
            <ul>
            </ul>
        </li>
    </ul>
</div>

CSS：

#mycontainer > ul {
    display: block;
}

#mycontainer > ul ul {
    min-height: 10px;
    padding-left: 20px;
}

.myplaceholder {
    background-color: yellow;
}

尝试将一个已经存在的项目拖到新添加的项目下，即使刷新后也无法这样做。

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

我找到了一个便宜的解决方法：

我在同一个标签上再次调用 sortable，像这样重新初始化 Sortable 插件：

$('#mycontainer ul').sortable({
    connectWith: '#mycontainer ul',
    placeholder: 'myplaceholder'
});

它有效。

【讨论】：

这对我有帮助，我没有意识到我在做什么：我正在添加一个全新的 container 元素，而不是添加到父可排序容器中。这个新元素从未设置过，我的控制台实际上通知了我！从我的臀部拉我的头后，我意识到了这一点。因此，我为可排序选项创建了一个更高范围的对象，然后我可以在我的 AJAX 调用之后重用这些选项。我希望这对其他人有帮助！
这真的有效吗？我遇到了同样的问题，似乎refresh 除了返回错误之外什么也没做（顺便说一句，它是不可修复的，它似乎不适用于嵌套元素）。最终再次复制粘贴整个 sortable() 函数似乎有点不切实际，因为我的代码比上面示例中的这 4 条代码规则要大。谁有更好的答案？

【解决方案2】：

关键的理解和要点是使用可排序选项初始化动态创建的<ul></ul>。我建议创建一个options 对象以便于重复使用。

$(document).ready(function() {
    const container = $('#mycontainer ul');
    const options = {
        connectWith: '#mycontainer ul',
        placeholder: 'myplaceholder'
    };
    container.sortable(options);
    
    function addElement(text) {
        let newListItem = $('<li>').text(text);
        newListItem.append($('<ul>').sortable(options)); // <- key concept
        $('#mycontainer > ul').append(newListItem);
        //container.sortable('refresh');
        
    }
    
    addElement('yolo');
    
});

#mycontainer > ul {
    display: block;
}

#mycontainer ul ul {
    min-height: 10px;
    padding-left: 20px;
}

.myplaceholder {
    background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="mycontainer">
      <ul>
          <li>
              Some text
              <ul>
              </ul>
          </li>
          <li>
              Some text 2
              <ul>
              </ul>
          </li>
          <li>
              Some text 3
              <ul>
              </ul>
          </li>
      </ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>

【讨论】：