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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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