remove - ¿Cómo puedo hacer que mi código jquery sea más fácil de arrastrar/soltar?
remove childs jquery (3)
¿No creo que tenga que ver con addClasses? Si se establece en falso, impedirá 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.
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 aún 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 alrededor de 100 filas), pero no me parece que sea obscenamente grande, y me pregunto si hay algo tonto que estoy haciendo que sea haciéndolo 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 la genera 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: parece que no funciona en IE 7, así que tal vez estoy haciendo algo muy malo aquí ...)
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 solo destino de colocación y calcule la celda de la tabla de objetivos según 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, habilitar los droppables 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.
Como primer paso, verifique que esté usando 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.