jQuery UI Leistungsprobleme mit einer Tabelle in IE

Question

Ich habe Probleme, UI-Code überhaupt gut in IE ausführen.

Ich habe eine Tabelle - eine Matrix von Werten. Jede Zelle kann leer sein oder eine Liste von Elementen enthalten.

Ich möchte Benutzer in der Lage sein, Elemente zwischen Zellen zu ziehen.

Also meine HTML sieht ungefähr so ​​aus:

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

Dann bin ich mit jQuery 1.3.1 und 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 
     }); 
    }); 
}); 

Beachten Sie, dass dies vereinfacht, verkürzt und unvollendet Code.

Mein Problem ist, dass in FX, Safari, Chrome usw. (d. H. Alle anständigen Browser) das funktioniert.

IE wirklich kämpft aber. Bei einer 5x5-Tabelle ist die IE-Verzögerung beim Start eines Ziehens bemerkbar. Bei einer 10x10-Tabelle mit vielleicht 100 Elementen hängt der Beginn des Ziehens den Browser.

Ich möchte in der Lage sein, bis zu runden 20x15 Zellen und vielleicht bis zu 500 Elemente zu unterstützen - ist das einfach unmöglich? Es scheint nicht so zu sein.

Mache ich etwas falsch? Gibt es einen Weg dies zu tun, der die Seite im IE nicht so verlangsamt?

Answer 1

Genau dieses Problem ist der Grund, warum iGoogle und andere ähnliche Apps eine transparente Box mit einer gepunkteten Linie am Rand verwenden. IE kann aufgrund des oben beschriebenen Problems keine vollständigen Objekte ziehen.

Answer 2

Es könnte das Tabellen-Rendering sein ... Können Sie es ohne den Tisch versuchen?

Wenn Ihre Zellen die gleiche Größe haben können Sie die tabellenartige Anzeige erreichen sie schwimmend:

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

Wenn Sie eine Tabelle mit einem Muss wird, kann die table-layout Stil ‚fixiert‘ und die Angabe der Zellen Größeneinstellung Hilfe.

Answer 3

Die Verengung des Teils des DOM, den jQuery durchsuchen muss, kann helfen. Fügen Sie eine ID an das enthält DOM-Element

<table id="myTable"> 

Dann ändern Sie Ihre jQuery-Selektor Elemente in diesem Container um

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

Answer 4

meine Arbeit zu finden sinkt die ‚activeClass‘ aus dem abwerfbaren Definition, und nur unter Verwendung von 'hoverClass'.

Auf einer Tabelle von etwa 150 Zeilen mit etwa 10 Spalten. Es ging von 10 Sekunden Verzögerung zu weniger als 1. Das Ziehen wird ein wenig ruckartig, aber nicht unbrauchbar.