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。如果之后，则添加项目，然后运行refresh方法。

这是一个有点复杂的示例，但是它假定您要从基于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>

如果列表中有多个列表，此代码将非常有效，因为它允许您将相同的功能用于许多不同的列表。

希望有帮助。

Answer 2

是的，只需致电

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

动态填充后的每次。

快乐的编码。

在动态创建的UL上使用Sortable

2 个答案: