How to bind a draggable event to multiple instances after using append

Question

I'm trying to make an inventory system with lots of slots, and I think that I'm doing something wrong. Is it the same calling ".draggable()" on each element like that or is it faster to group up all the elements and then apply it to them all? if so how can I do that? Here is my code:

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

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

 }

Thanks in advance,

Thaiscorpion

Answer 1

Just run a test:

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/

Results for x = 0 to 10000:

Time spend if draggable applied on each slot: 12.957s

Time spend if draggable applied on all slots: 140.269s