it-swarm.cn

如何使网页上的表格行看起来可拖动?

我在网页上有一张表格,需要让用户对行进行重新排序。我正在考虑让用户拖动行以对其进行重新排序。但是我如何让用户知道他可以做到呢?我应该在收件箱中的每封电子邮件中都将一个空白单元格作为带有点或垂直线(如gmail)的第一列吗?我在哪里可以得到这样的图像?我是否将“抓手”图标用作光标或“移动”光标?将鼠标悬停在桌子上还是仅在“抓图区域”上时显示光标?我是否让用户抓住行中要拖动的任何部分?

12
Adam

37signals' Basecamp 在以下方面做得很好:

Basecamp's drag indicator

将鼠标悬停在某个项目上时,控件将显示在该项目的左侧。控件之一是向上/向下箭头。将鼠标悬停在该控件上时,鼠标光标将变为移动光标。按住鼠标按钮可以在垂直轴上移动被抓取项目的位置,该位置与鼠标的位置相对应。释放鼠标按钮,将项目放置在最近的可接受位置。被拖动项目的位置在屏幕上不断更新,因此您知道它在哪里。

Gmail tasks drag indicator

Gmail的“任务”功能通过将鼠标悬停在某个项目上时向左显示拖动表面,从而在处理方式上有所不同。将鼠标悬停在拖动表面上会将光标更改为手形图标(不是抓手图标,它是闭合的手形)。进一步的行为与Basecamp相同。

有关此模式的更多信息,请查阅Yahoo Design模式库,并参考 有趣的故事情节提要板网格

22
Rahul

只要您的布局不拥挤,乘以提示确实可以帮助用户找出可用的功能。

因此,除了拖动手柄之外,您可能还希望在表格顶部附近添加“拖动行以重新排序”标题。

0
Pierre