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()。然後當用戶點擊元素時可拖動​​。

即使用戶沒有點擊，該元素現在可以拖動。由於用戶在鼠標懸停之前無法點擊某個元素，因此不會有任何元素不可拖動。加載速度更快，用戶體驗相同。