jQuery UI .draggable（）

Question

美好的一天！

只是有一个问题，如果你们中有人遇到我的问题。 问题是我想让动态创建的div元素可以拖动。是的，可以通过$('.frameHolder').draggable()来实现。但问题是，当div达到一千时，它导致浏览器变得非常慢（如800毫秒 - 通过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毫秒。

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

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

初始加载时间将是在200毫秒。

随着用户在页面上移动鼠标，用户必须先在mouseover之前，才能将click作为元素。我们可以使用它来触发该目标的.draggable()。然后当用户点击元素时可拖动​​。

即使用户没有点击，该元素现在可以拖动。由于用户在鼠标悬停之前无法点击某个元素，因此不会有任何元素不可拖动。加载速度更快，用户体验相同。