javascript - 哪种方法更适合可重新记录的 div - 向上/向下箭头或拖/放?

标签 javascript jquery html css drag-and-drop

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

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

每个 div 旁边的向上/向下箭头 会提供视觉提示,但如果最终用户想要将特定的 div 向上或向下移动很多位置,这对最终用户来说会很尴尬。

关于上述,由于我使用 Moodle 进行教学,我偏向于拖放。我们确实有一个克服视觉提示问题的培训类(class)。我的目标是让我的应用尽可能对用户友好,而不必教用户太多(如果有的话)。

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

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

附言垂直列表可能会很长。

最佳答案

关于 User Experience Stack Exchange 上的可用性问题,您可能会得到一些更好的答案。 .我自己的轶事经历是,在一个长列表中,一次只能将元素向上或向下移动一个元素的界面是完全痛苦,当拖放终于成为实现后,这是一股清新的空气。

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

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

关于javascript - 哪种方法更适合可重新记录的 div - 向上/向下箭头或拖/放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37369981/

相关文章:

JavaScript 警报消息和程序流程

html - 如何使按钮看起来像标签?

javascript - 如何在 HTML 中重复选择元素

javascript - 将 JavaScript 变量发送到 PHP

javascript - 从已删除的 DOM 元素中分离 jQuery 监听器

jquery - 创建一个可以判断 YouTube channel 是否直播的 Jquery 函数

html - 上下和淡出动画

自动幻灯片放映的 JavaScript 代码无法在单独的 .js 文件中运行,但可以在 html 中运行

javascript - 更改 Ajax POST 的引荐来源网址

javascript - 具有 RequireJS : anti-pattern? 的单例主干模型