jQuery UI .draggable（）

Question

おやすみ！

あなたのいずれかが私の問題に遭遇したかどうか質問をください。 問題は、動的に作成されたdiv要素をドラッグ可能にしたいということです。はい、達成することができます$('.frameHolder').draggable()。しかし、問題は、divが1000を超えてブラウザが実際に遅くなる（800 ms - 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

多くの要素をドラッグ可能にするもう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ミリ秒の下になります。

ユーザがページを横切ってマウスを動かすと、ユーザはclickの要素より先にmouseoverになる必要があります。これを使用して、そのターゲットに対して.draggable()をトリガーすることができます。ユーザーが要素をクリックすると、ドラッグ可能になります。

ユーザーがクリックしなくても、要素がドラッグ可能になりました。ユーザーがマウスオーバーする前に要素をクリックすることはできないため、ドラッグできない要素はありません。より速いロードと同じユーザーエクスペリエンス。