Problemi con le prestazioni dell'interfaccia utente jQuery con una tabella in IE

Question

Sto riscontrando problemi nell'ottenere un buon funzionamento del codice dell'interfaccia in IE.

Ho una tabella - una matrice di valori. Ogni cella può essere vuota o contenere un elenco di elementi.

Desidero che gli utenti siano in grado di trascinare gli elementi tra le celle.

Quindi il mio HTML sembra qualcosa di simile:

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

Poi sto usando jQuery 1.3.1 e 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 
     }); 
    }); 
}); 

Si noti che questo è semplificata, troncato e non finito codice.

Il mio problema è che in FX, Safari, Chrome, ecc (vale a dire tutti i browser decenti) questo funziona bene.

IE lotta davvero. Con un tavolo 5x5, il ritardo di IE all'inizio di un trascinamento è notevole. Su una tabella 10x10 con forse 100 elementi, l'inizio del trascinamento si blocca nel browser.

Voglio essere in grado di supportare fino a 20x15 celle rotonde e forse fino a 500 articoli - è semplicemente impossibile? Non sembra che dovrebbe essere.

Sto facendo qualcosa di sbagliato? C'è un modo per fare questo che non rallenta la pagina in IE come questo?

Answer 1

Questo esatto problema spiega perché iGoogle e altre app simliar utilizzano una scatola trasparente con una linea tratteggiata attorno al bordo. IE non è in grado di trascinare oggetti completi, a causa del problema che hai descritto sopra.

Answer 2

Potrebbe essere il rendering della tabella ... Puoi provare senza il tavolo?

Se le cellule sono le stesse dimensioni è possibile ottenere la visualizzazione della tabella-come loro flottante:

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

Se si utilizza una tabella è un'impostazione lo stile table-layout a 'fisso' must e specificando le dimensioni cellule possono Aiuto.

Answer 3

Limitare la parte del DOM che jQuery deve cercare può aiutare. Aggiungere un id all'elemento DOM contenente

<table id="myTable"> 

Poi modificare il vostro selettore jQuery per trovare elementi in questo contenitore

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

Answer 4

mio lavoro intorno è far cadere il 'activeClass' dalla definizione droppable, e solo utilizzando 'hoverClass'.

Su un tavolo di circa 150 file con circa 10 colonne. Passò da 10 secondi di ritardo a meno di 1. Il trascinamento diventa un po 'a scatti, ma non inutilizzabile.