Jak mogę przyspieszyć mój kod jquery do przeciągnięcia/upuszczenia?

Question

Użyłem JQuery, aby elementy w tabeli przeciągalne. (Nigdy wcześniej nie używałam JQuery). Działa dobrze, ale jest wolnybardzo wolny. Na przykład od momentu kliknięcia i przytrzymania elementu do chwili zmiany kursora wynosi około 2 sekundy. To jest na Firefox 3.0.6. Kiedy przedmiot jest przeciągany, pojawia się krótsze, ale zauważalne opóźnienie (około pół sekundy, jak oceniłbym) między chwilą, gdy puściłem przycisk myszy i kiedy spadek w widoczny sposób nastąpi.

Podejrzewam, że powód jest tak powolny, ponieważ stół jest dość duży (6 kolumn i około 100 rzędów), ale nie wydaje mi się, że jest nieprzyzwoicie duży i zastanawiam się, czy jest coś głupiego. Robię to tak wolno. Zastanawiam się na przykład, czy kod JQuery jest bezużytecznie stosowany do każdego elementu w tabeli za każdym razem, gdy coś przeciągasz. Nie wiem, dlaczego tak się stało.

W przypadku pomaga, tutaj jest mój kod (uwaga, że ​​wziąłem się wezwanie kursora, a bałem się, że może być spowolnienie rzeczy w dół).

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

tabela HTML jest tak (jak generowane przez 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> 

(Uwaga: to nie wydają się działać na wszystkich w IE 7, więc może jestem po prostu robi coś tu jest nie tak ...)

Answer 1

Obecność tak wielu celów spadek wydaje się mieć wydajność tak powolny. Jeśli to możliwe, spróbuj ustawić tabelę jako pojedynczy cel upuszczania i obliczyć docelową komórkę tabeli na podstawie danych pozycji w zdarzeniu upuszczenia.

Niestety, można również stracić zdolność do stosowania stylów do poszczególnych komórek na dragOver i wyciągania wydarzeń.

Edycja: Kolejną sugestią jest wyłączenie droppable na wszystkich td i po najechaniu kursorem myszy na tr, włączenie droppables z tds obecnych w konkretnym tr (i wyłączenie ich z powrotem po mouseout z tr). Brzmi jak włamanie, ale warto spróbować.

Answer 2

nie sądzę, jego związek z addClasses? Jeśli ustawiona na wartość false, uniemożliwi dodanie klasy, która może zostać usunięta. Może to być pożądane jako optymalizacja wydajności podczas wywoływania .droppable() init na wielu setkach elementów.

Answer 3

Jako pierwszy krok, sprawdź, że używasz najnowszej wersji jQuery. Jak sobie przypominam, ostatnio zaczęli korzystać z znacznie szybszych apisów przeglądarki (jeśli są dostępne), aby uzyskać lokalizację elementów domowych na ekranie. Myślę, że było to wspomniane w prezentacji, którą John Resig dał niedawno, a przeciąganie i upuszczanie było głównym demo poprawy wydajności.