对于可重复的div,哪种方法更好 - 向上/向下箭头或拖放?

时间:2016-05-22 02:35:55

标签: javascript jquery html css drag-and-drop

从最终用户的角度来看。如果我有一个每个div中具有不同内容的垂直div的列表,我应该提供向上/向下箭头来重新排序div还是应该允许用户将div拖放到特定的顺序?

拖放将允许用户将div放在垂直列表中的任何位置,但最终用户可能不明白div是可移动的。

每个div旁边的向上/向下箭头会提供视觉提示,但如果他们想要将特定div向上或向下移动大量的地方,则会对最终用户感到尴尬。

关于上述内容,由于我使用Moodle进行教学,因此我倾向于拖放。我们确实有一个培训课程,克服了视觉提示问题。我的目标是尽可能方便用户使用,而不必过多地教导用户(如果有的话)。

是否有一个特定的CSS样式用于提供提示的div - 就像抓手的拖放一样,我可以使用CSS在div周围放置某种视觉提示。

欢迎任何意见,我希望你能理解我在这里想要达到的目标。

P.S。垂直列表可能很长。

1 个答案:

答案 0 :(得分:1)

您可以在User Experience Stack Exchange上获得有关可用性问题的更好答案。我自己的轶事体验是使用了一个界面,在这个界面中,项目只能在长列表中一次向上或向下移动一个项目,这是一个总的痛苦,当拖拽最终时实施,这是一股清新的空气。

我还进行了一次可用性测试(任务1 in this PDF),其中有一个简单的标签“拖动添加一个新的...”(它是一个复制界面,而不是一个重新排序的界面) 8个用户中有8个在没有任何提示的情况下很快发现了药丸形状的元素(带有“抓手”光标和悬停时的颜色变化)。

至于您的技术问题,您可以实现一些不同的CSS光标样式(特别是cursor: move;cursor:grabcursor:grabbing(我的偏好是'抓取'拖动时“悬停”和“抓取”。我在这里展示了一些:https://jsfiddle.net/xnho95oL/,以及可能出现的一些“占位符”元素的想法(当将项目拖过它们时可能会扩展或以其他方式改变外观)。