javascript - 使用追加后如何将可拖动事件绑定到多个实例

Question

我正在尝试制作一个有很多插槽的库存系统，但我认为我做错了什么。像这样对每个元素调用“.draggable()”是否相同，或者将所有元素分组然后将其应用于所有元素是否更快？如果是这样，我该怎么做？这是我的代码：

 for (x=0; x<100; x++){

    var $slots = $('<div class="slot">'+(x+1)+'</div>').appendTo('#inventory').draggable();

 }

提前致谢，

泰国蝎子

Answer 1

只需运行一个测试：

var start = new Date().getTime();

for (x=0; x<1000; x++){

    $('<div class="slot">'+(x+1)+'</div>').appendTo('#inventory').draggable();

}
var time_spent = new Date().getTime() - start;
$('#results').append("Time spend if draggable applied on each slot: " + ( time_spend / 1000 ) + "s");

start = new Date().getTime();
for (x=0; x<1000; x++){

   $('<div class="slot">'+(x+1)+'</div>').appendTo('#inventory');

}
$('.slot').draggable();
time_spent = new Date().getTime() - start;
$('#results').append("<br/>Time spend if draggable applied on all slots: " + ( time_spend / 1000 ) + "s");

http://jsfiddle.net/gael/4KSmd/1/

x = 0 到 10000 的结果：

如果在每个插槽上应用可拖动，则花费的时间：12.957 秒

如果可拖动应用于所有插槽，则花费的时间：140.269 秒