Problemy z wydajnością interfejsu jQuery UI z tabelą w IE

Question

Mam problemy z uzyskaniem kodu UI w ogóle w IE.

Mam tabelę - macierz wartości. Każda komórka może być pusta lub zawierać listę przedmiotów.

Chcę, aby użytkownicy mogli przeciągać elementy między komórkami.

Więc moim HTML wygląda mniej więcej tak:

<table> 
    <tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr> 
    <tr><th scope="row">row 1</th> 
     <td class="droppable-cell"> 
      <div class="draggable-item">item A</div> 
      <div class="draggable-item">item B</div> 
     </td> 
     <td class="droppable-cell"></td> 
    </tr> 
    <tr><th scope="row">row 2</th> 
     <td class="droppable-cell"></td> 
     <td class="droppable-cell"> 
      <div class="draggable-item">item C</div> 
      <div class="draggable-item">item D</div> 
     </td> 
    </tr> 
</table> 

Następnie używam jQuery 1.3.1 i jQuery UI 1.6rc6:

$j('.draggable-item').each(function() 
{ 
    $j(this).draggable({ 
     addClasses: false, 
     revert: true, 
     zIndex: 2000, 
     cursor: 'move' 
    }); 
}); 

$j('.droppable-cell').each(function() 
{ 
    $j(this).droppable({ 
     addClasses: false, 
     activeClass: 'droppable-cell-candrop', 
     hoverClass: 'droppable-cell-hover', 
     tolerance: 'pointer', 

     drop: function(event, ui) 
     { 
      //function to save change 
     }); 
    }); 
}); 

pamiętać, że jest uproszczony, obcięty i niedokończone kod.

Mój problem polega na tym, że w FX, Safari, Chrome itp. (Tj. Wszystkie przyzwoite przeglądarki) działa to dobrze.

IE naprawdę walczy. Przy 5x5 tabeli widoczne jest opóźnienie IE na początku przeciągania. Na stole 10x10 z około 100 pozycjami początek przeciągnięcia zawiesza przeglądarkę.

Chcę być w stanie obsłużyć do rundy 20x15 komórek i może do 500 elementów - czy to po prostu niemożliwe? Wygląda na to, że nie powinno tak być.

Czy robię coś nie tak? Czy istnieje sposób, aby to zrobić, że nie spowalnia stronę w IE w ten sposób?

Answer 1

Ten dokładny problem polega na tym, że iGoogle i inne podobne aplikacje używają przezroczystego pola z przerywaną linią wokół krawędzi. IE nie może przeciągać pełnych obiektów z powodu problemu opisanego powyżej.

Answer 2

Może to być rendering tabeli ... Czy możesz wypróbować bez stołu?

Jeśli komórki są tej samej wielkości można osiągnąć wyświetlanie tabeli-jak je pływające:

<style> 
.droppable-cell{ 
    float:left; width: 50%; height: 20px; border: 1px solid black; 
} 
</style> 

<div class="droppable-cell"> 
     <div class="draggable-item">item A</div> 
     <div class="draggable-item">item B</div> 
</div> 
<div class="droppable-cell"></div> 
<div class="droppable-cell"></div> 
<div class="droppable-cell"> 
     <div class="draggable-item">item C</div> 
     <div class="draggable-item">item D</div> 
</div> 

Jeśli przy użyciu tabeli jest koniecznością ustawieniu stylu table-layout na „stałe” i określania rozmiaru komórki mogą Wsparcie.

Answer 3

Zawężanie części DOM, które jQuery ma szukać, może pomóc. Dodaj identyfikator do zawierającym elementu DOM

<table id="myTable"> 

Następnie zmieniać swój selektor jQuery znaleźć elementy wewnątrz tego kontenera

$j('#myTable .draggable-item').each(function() { ... 

Answer 4

moja praca wokół jest upuszczenie „activeClass” z droppable definicji, a tylko przy użyciu "hoverClass".

Na stole z około 150 rzędów z około 10 kolumnami. Przesunięcie trwało od 10 sekund do mniej niż 1. Przeciąganie staje się nieco niestabilne, ale nie można go użyć.