Come posso rendere più rapido il mio codice javery trascinabile/trascinabile?

Question

Ho usato JQuery per rendere trascinabili gli elementi di una tabella. (Non ho mai usato JQuery prima di questo). Funziona bene, ma è molto lento. Ad esempio, dal momento in cui clicco e tengo premuto su un oggetto, al momento in cui il cursore cambia, circa 2 secondi. Questo è su Firefox 3.0.6. Una volta che l'elemento viene trascinato, c'è un ritardo più breve, ma ancora evidente (circa mezzo secondo, lo stimerei) tra quando rilasciamo il pulsante del mouse e quando il rilascio si manifesta in modo visibile.

Ho il sospetto che il motivo sia così lento perché il tavolo è abbastanza grande (6 colonne e circa 100 file), ma non mi sembra che sia oscenamente grande, e mi chiedo se c'è qualcosa di stupido farlo è renderlo così lento. Ad esempio, mi chiedo se il codice JQuery venga applicato inutilmente a ogni elemento della tabella ogni volta che si trascina qualcosa. Non so perché sarebbe successo, però.

In caso aiuta, ecco il mio codice (nota che ho preso la chiamata del cursore, come avevo paura che potrebbe essere rallentando il tutto).

<script type='text/javascript'> 
    $(document).ready 
    (
    function() 
    { 
     $('.draggable_div').draggable 
     (
     { 
      start: function(event, ui) 
      { 
      $(this).css('background-color','#ddddff'); 
      } 
     } 
    ); 
     $('.draggable_td').droppable 
     (
     { 
      over: function(event, ui) 
      { 
      $(this).css('background-color', '#ccffcc'); 
      }, 
      out: function(event, ui) 
      { 
      $(this).css('background-color', null); 
      }, 
      drop: function(event, ui) 
      { 
      // snip: removed code here to save space. 
      } 
     } 
    ); 
    } 
); 
</script> 

La tabella HTML è come questo (come generata da PHP):

<table id='main_table' border=0> 
<tr> 
    <th width=14.2857142857%>0</th> 
    <th width=14.2857142857%>1</th> 
    <th width=14.2857142857%>2</th> 
    <th width=14.2857142857%>3</th> 
    <th width=14.2857142857%>4</th> 
    <th width=14.2857142857%>5</th> 
    <th width=14.2857142857%>6</th> 
</tr> 
<tr> 
    <td class=draggable_td id='td:0:0:'> 
    <div class=draggable_div id='div:0:0:1962'> 
    content 
    </div> 
    </td> 
    <td class=draggable_td id='td:0:1:1962'> 
    <div class=draggable_div id='div:0:1:14482'> 
    content 
    </div> 
    </td> 
    <!-- snip: all the other cells removed for brevity --> 
</tr> 
<!-- snip: all the other rows removed for brevity --> 
</table> 

(Nota: non sembra funzionare affatto in IE 7, quindi forse sto solo facendo qualcosa di molto sbagliato qui ...)

Answer 1

La presenza di tanti bersagli a caduta sembra rendere la prestazione così lento. Se possibile, provare a impostare la tabella come obiettivo di rilascio singolo e calcolare la cella della tabella di destinazione in base ai dati di posizione nell'evento di rilascio.

Purtroppo, si perderà anche la possibilità di applicare stili alle singole celle su eventi DragOver e dragOut.

Modifica: Un altro suggerimento è di disabilitare il trascinamento su tutti i tds e il passaggio del mouse su un tr, abilitare i droppable di tds presenti nello specifico tr (e disabilitarli nuovamente al passaggio del mouse su tr). Sembra un trucco, ma vale la pena provare.

Answer 2

non credo che il suo da fare con addClasses? Se impostato su false, impedirà l'aggiunta della classe di trascinamento. Ciò può essere desiderato come ottimizzazione delle prestazioni quando si chiama init .droppable() su molte centinaia di elementi.

Answer 3

Come primo passo, doppio controllo che si sta utilizzando l'ultima versione di jQuery. Come ricordo, recentemente hanno iniziato a utilizzare apis browser molto più veloci (quando disponibili) per ottenere la posizione degli elementi dom all'interno del display. Penso che questo sia stato menzionato in una presentazione recentemente rilasciata da John Resig e il drag and drop è stata la demo principale del miglioramento delle prestazioni.