Como faço para que uma linha da tabela em uma página da Web pareça arrastável?
Eu tenho uma tabela em uma página da web em que preciso permitir que o usuário reordene as linhas. Eu estava pensando em deixar o usuário arrastar as linhas para reordená-las. Mas como eu informaria ao usuário que ele poderia fazer isso? Devo criar uma célula vazia como a primeira coluna com pontos ou linhas verticais, como o gmail, para cada e-mail na caixa de entrada? Onde posso obter uma imagem assim? Eu uso um ícone de "mão agarrando" para o cursor ou um cursor "mover"? Mostro o cursor enquanto passe o mouse sobre a mesa ou apenas a "área de agarrar"? Deixo o usuário pegar qualquer parte da linha para arrastar?
37signals ' Basecamp faz um ótimo trabalho com isso:
Ao passar o mouse sobre um item, os controles aparecem à esquerda do item. Um dos controles é uma seta para cima/para baixo. Ao passar o mouse sobre esse controle, o cursor do mouse muda para um cursor de movimentação. Manter o botão do mouse pressionado move a posição do item agarrado no eixo vertical correspondente à posição do mouse. Soltar o botão do mouse coloca o item na posição aceitável mais próxima. A posição do item que está sendo arrastado é constantemente atualizada na tela para que você saiba onde ele está.
O recurso Tarefas do Gmail lida um pouco de maneira diferente, mostrando uma superfície de arrasto para a esquerda quando você passa o mouse sobre um item. Passar o mouse sobre a superfície de arrasto altera o cursor para um ícone de mão (não um ícone de agarrar, que é uma mão fechada). Um comportamento adicional é idêntico ao Basecamp.
Para obter mais informações sobre esse padrão, consulte a Yahoo Design Pattern Library e consulte a grade de storyboard de momentos interessantes .
Desde que seu layout não esteja superlotado, a multiplicação das dicas ajuda os usuários a descobrir quais recursos estão disponíveis.
Além das alças de arrasto, você pode adicionar uma legenda "Arrastar linhas para reordenar" perto da parte superior da sua tabela.