Question

我有一组可以拖入可排序作曲家的项目。

在作曲家中拖动和排序项目的表现是缓慢而滞后的。随着项目的重新排列，我期望更多的响应能力，但我发现在作曲家中移动项目时有一个延迟来实现排序。 demos on the jQuery site要快得多。

有谁知道导致响应能力下降的原因是什么？代码如下所示，完整演示在此处：http://codepen.io/redmondo/pen/YZporb

$(function() {
  // Add items to picker.
  for (i = 0; i < 10; i++) {
    var $item = createItem(i);
    $("#picker").append($item);
  }

  // Set up sortable.
  $("#composer")
    .sortable({
      items: "> .item",
      receive: function(event, ui) {
        var data = ui.item.attr("data-item");
        var dataAttr = "[data-item='" + data + "']";
        // If the element was actually dropped in the composer
        if ($("#composer .item"+ dataAttr).length > 0) {
          $("#picker .item" + dataAttr)
            .draggable("disable")
            .addClass("inactive");
        }
      }
    })
});

function createItem(i) {
  var $item = $("<div>" + i + "</div>")
    .addClass("item")
    .attr("data-item", i)
    .draggable({
      connectToSortable: ".connected-sortable",
      revert: "invalid",
      revertDuration: 100,
      appendTo: "body",
      helper: "clone",
      refreshPositions: true
    });

  return $item;
}

Answer 1

我通过将选项tolerance: pointer设置为sortable来提高性能/响应能力，在这种交互的情况下效果更好。

jQuery UI Sortable：拖放重新排序交互的性能

1 个答案: