¿Cómo puedo hacer que mi código jquery sea más fácil de arrastrar/soltar?

Question

He usado JQuery para hacer que los elementos de una tabla se puedan arrastrar. (Nunca he usado JQuery antes de esto). Funciona bien, pero es muy lento. Por ejemplo, desde el momento en que hago clic y sostengo un elemento, hasta el momento en que el cursor cambia es de aproximadamente 2 segundos. Esto está en Firefox 3.0.6. Una vez que se arrastra el artículo, hay un retraso más corto, pero todavía notable (aproximadamente medio segundo, lo estimaría) entre cuando suelte el botón del mouse y cuando la caída se produce visiblemente.

Sospecho que la razón por la que es tan lento es porque la mesa es bastante grande (6 columnas y unas 100 filas), pero no me parece que sea obscenamente grande, y me pregunto si hay algo tonto ' Hacer eso es hacerlo tan lento. Por ejemplo, me pregunto si el código de JQuery se aplica sin sentido a cada elemento de la tabla cada vez que se arrastra algo. No sé por qué sucedería eso, sin embargo.

En caso de que sea útil, aquí está mi código (tenga en cuenta que he sacado la llamada del cursor, ya que temía que pudiera ralentizar las cosas).

<script type='text/javascript'> 
    $(document).ready 
    (
    function() 
    { 
     $('.draggable_div').draggable 
     (
     { 
      start: function(event, ui) 
      { 
      $(this).css('background-color','#ddddff'); 
      } 
     } 
    ); 
     $('.draggable_td').droppable 
     (
     { 
      over: function(event, ui) 
      { 
      $(this).css('background-color', '#ccffcc'); 
      }, 
      out: function(event, ui) 
      { 
      $(this).css('background-color', null); 
      }, 
      drop: function(event, ui) 
      { 
      // snip: removed code here to save space. 
      } 
     } 
    ); 
    } 
); 
</script> 

La tabla HTML es así (como se genera mediante PHP):

<table id='main_table' border=0> 
<tr> 
    <th width=14.2857142857%>0</th> 
    <th width=14.2857142857%>1</th> 
    <th width=14.2857142857%>2</th> 
    <th width=14.2857142857%>3</th> 
    <th width=14.2857142857%>4</th> 
    <th width=14.2857142857%>5</th> 
    <th width=14.2857142857%>6</th> 
</tr> 
<tr> 
    <td class=draggable_td id='td:0:0:'> 
    <div class=draggable_div id='div:0:0:1962'> 
    content 
    </div> 
    </td> 
    <td class=draggable_td id='td:0:1:1962'> 
    <div class=draggable_div id='div:0:1:14482'> 
    content 
    </div> 
    </td> 
    <!-- snip: all the other cells removed for brevity --> 
</tr> 
<!-- snip: all the other rows removed for brevity --> 
</table> 

(Nota: no parece funcionar en absoluto en IE 7, así que tal vez sólo estoy haciendo algo muy malo aquí ...)

Answer 1

La presencia de tantos objetivos de caída parece hacer que el rendimiento sea tan lento. Si es posible, intente configurar la tabla como un único destino de soltar y calcule la celda de la tabla de destino en función de los datos de posición en el evento de colocación.

Desafortunadamente, también perderá la capacidad de aplicar estilos a celdas individuales en los eventos dragOver y dragOut.

Editar: Otra sugerencia es desactivar droppable en todos los tds y al pasar el mouse sobre un tr, habilita los marcadores desplegables de tds presentes en el tr específico (y deshabilitarlos de nuevo al mouseout de tr). Suena como un truco, pero vale la pena intentarlo.

Answer 2

Supongo que no tiene que ver con addClasses? Si se establece en falso, evitará que se agregue la clase ui-droppable. Esto se puede desear como una optimización del rendimiento al llamar a .droppable() init en muchos cientos de elementos.

Answer 3

Como primer paso, compruebe que está utilizando la última versión de jQuery. Según recuerdo, recientemente comenzaron a utilizar aplicaciones de navegación mucho más rápidas (cuando están disponibles) para obtener la ubicación de los elementos dom dentro de la pantalla. Creo que esto fue mencionado en una presentación que John Resig dio recientemente, y arrastrar y soltar fue la demostración principal de la mejora del rendimiento.