Problemas de rendimiento de jQuery UI con una tabla en IE

Question

Tengo problemas para obtener el código de UI para que funcione bien en IE.

Tengo una tabla: una matriz de valores. Cada celda puede estar vacía o contener una lista de elementos.

Quiero que los usuarios puedan arrastrar elementos entre las celdas.

Así que mi HTML se ve algo como esto:

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

Entonces estoy usando jQuery 1.3.1 y 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 
     }); 
    }); 
}); 

Tenga en cuenta que esto se simplifica, truncada y sin terminar código.

Mi problema es que en FX, Safari, Chrome, etc. (es decir, todos los navegadores decentes) esto funciona bien.

Aunque el IE realmente tiene problemas. Con una tabla de 5x5, el retraso de IE al inicio de un arrastre es notable. En una tabla de 10x10 con quizás 100 elementos, el inicio de la acción de arrastre bloquea el navegador.

Quiero ser capaz de admitir células redondas de hasta 20x15 y tal vez hasta 500 elementos. ¿Es esto simplemente imposible? No parece que debería ser.

¿Estoy haciendo algo mal? ¿Hay alguna manera de hacer esto que no ralentice la página en IE de esta manera?

Answer 1

Este es el problema exacto por el que iGoogle y otras aplicaciones similares utilizan una caja transparente con una línea punteada alrededor del borde. IE no puede arrastrar objetos completos, debido al problema que describió anteriormente.

Answer 2

Podría ser la representación de la tabla ... ¿Puedes probar sin la tabla?

Si las células son del mismo tamaño que puede alcanzar la pantalla a modo de mesa flotando:

<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 se utiliza una tabla es una de seleccionar el estilo table-layout a 'fijo' necesidad y especificando el tamaño de las células puede ayuda.

Answer 3

Limitar la parte del DOM que jQuery tiene para buscar puede ayudar. Añadir un id al elemento DOM que contiene

<table id="myTable"> 

Entonces alterar su selector de jQuery para encontrar elementos dentro de este contenedor

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

Answer 4

mi solución es dejar caer el 'activeClass' de la definición lanzables, y sólo utilizando 'hoverClass'.

En una tabla de aproximadamente 150 filas con alrededor de 10 columnas. Pasó de 10 segundos de retraso a menos de 1. El arrastre se vuelve un poco desigual, pero no inutilizable.