Wie kann ich meinen jaggey ziehbaren Code beschleunigen?

Question

Ich habe JQuery verwendet, um die Elemente in einer Tabelle ziehbar zu machen. (Ich habe JQuery vorher noch nie benutzt). Es funktioniert gut, aber ist sehr langsam. Zum Beispiel, von dem Moment an, in dem ich auf ein Objekt klicke und festhalte, bis zu dem Moment, an dem sich der Cursor ändert, sind es ungefähr 2 Sekunden. Dies ist in Firefox 3.0.6. Sobald das Objekt gezogen wird, gibt es eine kürzere, aber immer noch merkbare Verzögerung (etwa eine halbe Sekunde, würde ich schätzen) zwischen dem Zeitpunkt, wenn ich die Maustaste loslasse und wenn der Tropfen sichtbar ist.

Ich vermute, dass der Grund, warum es so langsam ist, ist, weil der Tisch ziemlich groß ist (6 Spalten und etwa 100 Zeilen), aber es scheint mir nicht, dass es obszön groß ist, und ich frage mich, ob es etwas Dummes ist Ich mache das so langsam. Ich frage mich beispielsweise, ob der JQuery-Code bei jedem Ziehen von Elementen sinnlos auf jedes Element in der Tabelle angewendet wird. Ich weiß nicht, warum das passieren würde.

Falls es hilft, hier ist mein Code (beachten Sie, dass ich den Cursor-Aufruf herausgenommen habe, da ich befürchtete, dass es die Dinge verlangsamen könnte).

<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> 

Die HTML-Tabelle wie folgt ist (wie von PHP generiert):

<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> 

(Anmerkung: es scheint nicht an allen 7 in IE zu arbeiten, also vielleicht bin ich nur tun etwas sehr falsches hier ...)

Answer 1

Die Anwesenheit so vieler Drop-Ziele scheint die Performance so langsam zu machen. Versuchen Sie nach Möglichkeit, die Tabelle als Einzelziel festzulegen, und berechnen Sie die Zieltabellenzelle basierend auf den Positionsdaten im Ereignis drop.

Leider verlieren Sie auch die Fähigkeit, Stile auf einzelne Zellen bei dragOver- und dragOut-Ereignissen anzuwenden.

Edit: Ein weiterer Vorschlag ist es, auf alle tds und bei MouseOver eines tr deaktivieren Dropable, tdpables der tds in den spezifischen tr (aktivieren Sie sie wieder nach mouseout von tr). Klingt wie ein Hack, aber einen Versuch wert.

Answer 2

Ich nehme nicht an, dass es mit addClasses zu tun hat? Wenn auf false festgelegt, wird verhindert, dass die Klasse ui-droppable hinzugefügt wird. Dies kann als eine Leistungsoptimierung erwünscht sein, wenn .droppable() init auf vielen Hunderten von Elementen aufgerufen wird.

Answer 3

Überprüfen Sie als ersten Schritt, ob Sie die neueste Version von jQuery verwenden. Soweit ich mich erinnere, haben sie vor kurzem begonnen, viel schnellere Browser-Apis (wenn verfügbar) zu verwenden, um die Position von dom-Elementen innerhalb der Anzeige zu erhalten. Ich denke, dass dies in einer Präsentation erwähnt wurde, die John Resig kürzlich gab, und Drag & Drop war die primäre Demo der Leistungsverbesserung.