Javascript jqueryui.draggable（）

你好

如果你们中有人遇到我的问题，我有个问题。 问题是我想使动态创建的div元素可以拖动。是的，可以通过

$（'.frameHolder'）.draggable（）实现。但问题是，当div达到1000时，它会导致浏览器变得非常慢（比如800ms——以性能衡量。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]
});

var frames=[]；
对于（var i=1；i另一种使大量元素可拖动的方法，无需提前更长的加载时间，就是按需执行。不是使所有元素都可拖动，而是使那些需要拖动的元素按需拖动。根据我的评论，我测试了许多减少加载时间的方法，并将加载时间降至~500毫秒

考虑以下几点：

HTML

<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.");
});

$（函数（）{
var框架=[]；
函数dragInit（t）{
if（t.hasClass（“ui可拖动”））{
返回；
}
log（“使框架[“+t.parent（）.index（）+”]>frameHolder可拖动”）；
t、 拖拉的({
包含：$（“#layerFrameContainer.layerFrame”），
轴：“x”，
光标：“指针”，
助手：“克隆”，
网格：[10,10]
});
}
var t0=performance.now（）；
对于（var i=1；i）最简单的解决方法是不要在页面中放置1000个div。如果可能的话，请使用分页。如果不可能，那么您唯一的选择就是优化JS代码。为此，我建议根本不要使用jQuery。@Rorymcrossan分页是不可能的。哦，伙计，那么我需要找到其他方法。谢谢伙计！全力以赴
div
s需要在任何时候都可以拖动？可能只是一次拖动一个特定的元素，比如当它有焦点时。这里的最终目标是什么，你试图做什么有点模糊。在我看来，问题是你创建了大约1000个jQuery对象，这开始消耗更多的浏览器内存。我打赌你可以看到它的增长。您的系统上可能只有800毫秒的延迟，但请尝试内存较少的系统或使用较旧的CPU。我打赌您会看到浏览器同时停止响应。正如@Rorymcrossan指出的，您需要优化代码，以使其使用更少的内存和资源。这可以通过原始代码或减少包含的库来完成。或者……也许排序更多的是你需要的。再说一遍，你的文章没有足够的上下文来理解你需要什么。老兄，你绝对是一个救世主！感谢你太多了。只是让元素可以根据需要拖放，没有更多的内存问题。这个解决方案是我必须在脑子里钻研的。