Problèmes de performances de l'interface utilisateur jQuery avec une table dans IE

Question

Je rencontre des problèmes pour que le code de l'interface utilisateur fonctionne correctement dans IE.

J'ai une table - une matrice de valeurs. Chaque cellule peut être vide ou contenir une liste d'éléments.

Je souhaite que les utilisateurs puissent faire glisser des éléments entre les cellules.

Donc, mon HTML ressemble à ceci:

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

Ensuite, j'utilise jQuery 1.3.1 et 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 
     }); 
    }); 
}); 

Notez que ceci est simplifiée, tronquée et inachevée code.

Mon problème est que dans FX, Safari, Chrome, etc (c'est-à-dire tous les navigateurs décents) cela fonctionne très bien.

IE vraiment du mal cependant. Avec une table 5x5, le retard d'IE sur le début d'un glisser est perceptible. Sur une table de 10x10 avec peut-être 100 éléments, le début du glisser est suspendu au navigateur. Je veux être en mesure de prendre en charge jusqu'à 20 x 15 cellules rondes et peut-être jusqu'à 500 articles - est-ce simplement impossible? Cela ne semble pas être le cas.

Est-ce que je fais quelque chose de mal? Y at-il un moyen de faire cela qui ne ralentit pas la page dans IE comme ça?

Answer 1

Ce problème est la raison pour laquelle iGoogle et d'autres applications simliar utilisent une boîte transparente avec une ligne pointillée autour du bord. IE est incapable de faire glisser des objets entiers, à cause du problème que vous avez décrit ci-dessus.

Answer 2

Cela pourrait être le rendu de la table ... Pouvez-vous essayer sans la table?

Si vos cellules sont de la même taille, vous pouvez obtenir l'affichage de la table comme faisant flotter:

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

Si vous utilisez une table est un must définir le style table-layout à « fixe » et en spécifiant la taille des cellules peut Aidez-moi.

Answer 3

Le rétrécissement de la partie du DOM que jQuery doit chercher peut aider. Ajouter un identifiant à l'élément contenant DOM

<table id="myTable"> 

ensuite modifier votre sélecteur jQuery pour trouver des éléments dans ce conteneur

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

Answer 4

mon travail est autour de laisser tomber le « activeClass » de la définition largable, et seulement à l'aide 'hoverClass'.

Sur une table d'environ 150 rangées avec environ 10 colonnes. Il est passé de 10 secondes de retard à moins de 1. Le traînage devient un peu saccadé, mais pas inutilisable.