it-swarm-es.com

¿Cómo hago que una fila de la tabla en una página web parezca arrastrable?

Tengo una tabla en una página web donde necesito dejar que el usuario reordene las filas. Estaba pensando en dejar que el usuario arrastre las filas para reordenarlas. Pero, ¿cómo le diría al usuario que puede hacer eso? ¿Debo hacer una celda vacía como la primera columna con puntos o líneas verticales como la que tiene gmail para cada correo electrónico en la bandeja de entrada? ¿Dónde puedo obtener una imagen como esa? ¿Utilizo un icono de "mano que agarra" para el cursor o un cursor de "movimiento"? ¿Muestro el cursor al pasar el mouse sobre la mesa o solo el "área de captura"? ¿Dejo que el usuario tome alguna parte de la fila para arrastrar?

12
Adam

37signals ' Basecamp hace un gran trabajo con esto:

Basecamp's drag indicator

Al pasar el cursor sobre un elemento, los controles aparecen a la izquierda del elemento. Uno de los controles es una flecha arriba/abajo. Al pasar el cursor sobre ese control, el cursor del mouse cambia a un cursor de movimiento. Manteniendo presionado el botón del mouse se mueve la posición del elemento agarrado en el eje vertical correspondiente a la posición del mouse. Al soltar el botón del mouse, el elemento cae en la posición aceptable más cercana. La posición del elemento que se arrastra se actualiza constantemente en la pantalla para que sepa dónde está.

Gmail tasks drag indicator

La función Tareas de Gmail lo maneja un poco diferente al mostrar una superficie de arrastre a la izquierda cuando pasa el cursor sobre un elemento. Al pasar el cursor sobre la superficie de arrastre, el cursor se convierte en un icono de mano (no un icono de agarre, que es una mano cerrada). El comportamiento adicional es idéntico al de Basecamp.

Para obtener más información sobre este patrón, consulte la Biblioteca de patrones de diseño de Yahoo y consulte cuadrícula de storyboard de momentos interesantes .

22
Rahul

Siempre que su diseño no esté abarrotado, multiplicar las sugerencias ayuda a los usuarios a descubrir qué características están disponibles.

Además de los controladores de arrastre, es posible que desee agregar un subtítulo "Arrastrar filas para reordenar" cerca de la parte superior de la tabla.

0
Pierre