jQuery UI .draggable()

Question

日安！

如果你们中有人遇到我的问题就问个问题。问题是，我希望动态创建的div元素是可拖放的。是的，可以通过$('.frameHolder').draggable()来实现。但问题是，当div达到1000时，它会导致浏览器变得非常慢(比如800 is -由performance.now()测量)。

下面是片段：

var frames = [];

for (var i = 1; i <= 100; i++) {
  frames.push('<div id="frame' + i + '" class="frame"><div id="frameHolder' + i + '" class="frameHolder"></div></div>');
}

$('.frameHolder').draggable({
  containment: $('#layerFrameContainer .layerFrame),
  axis: 'x',
  cursor: 'pointer',
  helper: 'clone',
  grid: [10, 10]
});

谢谢你们！

Answer 1

另一种使大量元素可拖动的方法，而无需预先加载更多的时间，是按需执行。与其使所有元素都可拖动，不如让那些需要拖动的元素按需要拖放。从我的评论，我测试了许多方法，以减少负载时间，并降低到500 ms。

考虑以下几点：https://jsfiddle.net/Twisty/mpns7w3n/11/

<div id="layerFrameContainer">
  <div class="layerFrame">
  </div>
</div>

JavaScript

$(function() {
  var frames = [];

  function dragInit(t) {
    if (t.hasClass("ui-draggable")) {
      return;
    }
    console.log("Making frame[" + t.parent().index() + "] > frameHolder draggable");
    t.draggable({
      containment: $('#layerFrameContainer .layerFrame'),
      axis: 'x',
      cursor: 'pointer',
      helper: 'clone',
      grid: [10, 10]
    });
  }

  var t0 = performance.now();
  for (var i = 1; i <= 1000; i++) {
    var frame = $("<div>", {
      id: "frame-" + i
    });
    var frameHolder = $("<div>", {
      id: "frameHolder-" + i,
      class: "frameHolder"
    }).appendTo(frame);
    frames.push(frame);
    $(".layerFrame").append(frame);
  }
  var t1 = performance.now();
  console.log("Call to loop took " + (t1 - t0) + " milliseconds.");
  $(".layerFrame").on("mouseover", ".frameHolder", function(e) {
    dragInit($(this));
  });
  var t2 = performance.now();
  console.log("Call to assign draggable took " + (t2 - t1) + " milliseconds.");
});

初始加载时间在200 ms以下。

当用户将鼠标移动到页面上时，用户必须先使用mouseover才能使用click元素。我们可以使用它来触发该目标的.draggable()。然后，当用户单击元素时，它是可拖动的。

即使用户不单击，元素现在也是可拖动的。由于用户在弹出元素之前不能单击该元素，因此没有任何元素是不可拖的。更快的加载和相同的用户体验。