在动态创建的 UL 上使用 Sortable

Question

对于经常使用 JQuery 的人来说，这可能是一个简单的问题。我只是将 S3 中的列表读入数组并使用

document.getElementById('my-list').appendChild(makeUL(options));

在 id 为 my-list 的 div 中构建 ul。它看起来像这样：

<div id="my-list">
    <ul id="sortable">
        <li class="ui-state-default">LivePD</li>
        <li class="ui-state-default">Football</li>
        <li class="ui-state-default">Walking Dead</li>
        <li class="ui-state-default">Survivor</li>
        <li class="ui-state-default">The Voice</li>
        <li class="ui-state-default">Shark Tank</li>
        <li class="ui-state-default">DWTS</li>
        <li class="ui-state-default">RHOOC</li>
    </ul>
</div>

我的可排序功能为：

<script>
    $(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
</script>

这就是问题所在。如果我将 ul 硬编码到我的 HTML 正文中，如上所示，可排序代码运行良好。它按预期将 ui-sortable 类添加到 ul 和 li 元素中。如果我使用 getElementById 动态构建 ul，则基本 HTML 呈现完全相同，但 sortable 不会添加类。

这是否与 DOM 的执行顺序有关？我根本想不通，也无法在任何地方找到另一个例子。对其他想法也完全开放。

Answer 1

请查看：

jQuery UI API Sortable Refresh Method

上面写着：

刷新可排序的项目。触发所有可排序项目的重新加载，从而识别新项目。

动态添加元素时，您可以在初始化 Sortable 之前或之后添加它们。如果之前完成，您只需组装列表项，然后调用 sortable。如果之后，添加项目，然后运行刷新方法。

这是一个有点复杂的示例，但它假设您正在从基于 API 的列表中添加项目，并且以后可能会添加更多项目。

$(function() {
  var extData = [{
    label: "LivePD",
    id: 1
  }, {
    label: "Football",
    id: 2
  }, {
    label: "Walking Dead",
    id: 3
  }, {
    label: "Survivor",
    id: 4
  }, {
    label: "The Voice",
    id: 5
  }, {
    label: "Shark Tank",
    id: 6
  }, {
    label: "DWTS",
    id: 7
  }, {
    label: "RHOOC",
    id: 8
  }];

  function updateList(data, target) {
    var sort = target.find(".sortable");
    console.log(data, sort);
    $.each(data, function(k, v) {
      $("<li>", {
        class: "ui-state-default",
        id: target.attr("id") + "-item-" + v.id
      }).html(v.label).appendTo(sort);
    });
    if (sort.hasClass("ui-sortable")) {
      sort.sortable("refresh");
    }
  }

  updateList(extData, $("#my-list"));
  $(".sortable").sortable();
  $(".sortable").disableSelection();
  $(".add").click(function(e) {
    var dlg = $("<div>", {
      title: "Add To " + $(this).parent().find("p").text()
    });
    var that = $(this);
    dlg.append(
      $("<label>").html("Name"),
      $("<input>", {
        type: "text",
        class: "name txt"
      }),
      $("<label>").html("ID"),
      $("<input>", {
        type: "input",
        class: "id txt"
      })
    );
    dlg.dialog({
      modal: true,
      buttons: [{
        text: "Ok",
        click: function() {
          var d = [{
            label: $(this).find(".name").val(),
            id: $(this).find(".id").val()
          }];
          updateList(d, that.parent());
          $(this).dialog("close");
          $(this).remove();
        }
      }, {
        text: "Cancel",
        click: function() {
          $(this).dialog("close");
          $(this).remove();
        }
      }]
    });
  });
});

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

.sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

.sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

.ui-dialog-content label {
  display: block;
}

<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="my-list">
  <p>My List</p>
  <ul class="sortable">
  </ul>
  <button id="my-list-add-btn" class="add btn">Add</button>
</div>

如果您有超过 1 个列表，则此代码运行良好，因为它允许您对许多不同的列表使用相同的函数。

希望对您有所帮助。

Answer 2

你打个电话

$("#sortable").sortable(); $("#sortable").disableSelection();

每次动态填充后。

编码愉快。