在动态创建的 UL 上使用 Sortable

Question

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

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

bui在 div 中添加一个 ul，id 为 my-list。它看起来像这样：

<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 class 添加到 ul 和 li 元素。如果我使用 getElementById 动态地 build ul，基础 HTML 呈现完全相同，但 sortable 不添加 classes.

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

Answer 1

你打电话给

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

每次动态填充后。

编码愉快。

Answer 2

请评论：

jQuery UI API Sortable Refresh Method

它说：

Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.

动态添加元素时，您将在初始化 Sortable 之前或之后添加它们。如果之前完成，您只需 assemble 列表项，然后调用 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 个以上的列表，此代码非常有效，因为它允许您对许多不同的列表使用相同的函数。

希望对您有所帮助。

在动态创建的 UL 上使用 Sortable

Using Sortable on Dynamically Created UL

javascript

jquery

jquery-ui

html-lists

jquery-ui-sortable