我有一个项目列表作为Web应用程序的一部分。问题是用户如何操纵列表中的项目顺序（而不是列表排序顺序）。典型的方法是使用箭头按钮向上或向下移动项目。另一种方式是拖放。
但是有没有其他方法可以让用户界面进行列表重新排序？
答案 0 :(得分：33)
还有另外两种排序方法（除了你提到的那些）我已经看到哪种方法做得很好。
点击移动
用于订购Gallery网络相册中的项目的方法非常适合订购照片，对于任何可以表示为可点击元素的排序组的集合，它也应该同样适用：
这比使用拖放更容易使用，因为它需要更少的灵活性，并且您无需在确定要“放下”项目的位置时按住鼠标按钮。
该方法可以很容易地扩展到允许选择多个项目（通过shift-click或类似），然后可以以相同的方式放置在新位置。
提供订单号
由Netflix和我使用的一些内部应用程序使用。如果您的用户具体确切了解数字顺序应该是什么（在我们的内部应用程序中使用指令步骤列表时使用），则此方法效果最佳。
修改：关于拖放的其他一些想法。您之前或者之前可能已经使用过这些，但有一些东西可以让拖放更宽容，更容易使用：
答案 1 :(得分：13)
我们发现拖放对于非技术人员来说可能是反直觉的。我们已经探索了向上箭头，它可以工作，但也可能很麻烦，因为你需要继续点击上下，这会导致大量的流量。
我们探索过的另一个范例是“移动”按钮，因此当您单击列表中的每个项目都有一个“移动项目”按钮时，会在列表中的每个项目之前和之后添加新按钮，以便将项目移动到任何位置。
当列表中的每个项占用大量空间时，这很有效，如果每个列表项只是一行，则可能导致杂乱的界面。在我们的例子中，每个项目都有六行或更多。我们还在每个项目之前/之后添加项目按钮以允许插入。
Survey Monkey也使用了这种范例，并启发了我们的一些工作。
答案 2 :(得分：6)
一些想法 - 尽管有很多想法而不是实施结束......
1 - 提供向上和向下箭头以及拖放，并监控哪个更受欢迎，哪种类型的用户使用哪个等，然后在您有一些数据后从那里定制
2 - 添加一个随机生成订单的“随机”按钮 - 可能没用，根据您的应用程序可能很有趣
3 - 在每个项目的旁边添加“显示顺序”字段，并允许用户对其进行操作（但请确保您有一些代码可以在更改时自动更新其余数字）我个人认为这样可能会非常混乱，但对某些用户来说可能会有效
4 - 不要拖放到位，让用户拖动到新列表
5 - 对于一个非常简单的版本，请选中“收藏夹”复选框，然后让列表首先显示收藏夹（按字母顺序或其他内容）
6 - 拥有群组 - 您为某个项目分配了一个群组编号，所有群组编号首先出现，然后是群组2等
希望这种随机漫游很有用，如果我想到更多，我会回来......
答案 3 :(得分：6)
您可以使用jQuery UI Sortables的示例尝试拖放操作。 为了使非技术用户或新用户显而易见，您可以使用视觉提示（如手柄或箭头）以及悬停时的工具提示来建议拖动元素。
你甚至可以提供演示手势的动画gif。
一旦用户了解如何操作，我认为这是订购列表最简单的方法。
答案 4 :(得分：5)
另一种方法是在每个项目旁边提供一个小文本输入，这样用户就可以自己输入数字排序;然后他们点击一个按钮立即重新排序。 （我只在存储项目顺序的网站上看到过这种情况，例如Netflix队列或Livejournal链接。）
答案 5 :(得分：5)
1）点击移动的变体将涉及具有单独的目标列表，其中用户选择其项目将移动到的插槽，然后单击原始项目以移动它。 / p>
例如，在下图中，用户已将“E”放在重新排序列表的开头，并为下一个选择选择了第3个插槽。他们的下一步是选择旧列表中的哪个项目进入新列表中的第3个插槽。 （星号行是一种微弱的尝试，表明突出显示或选择了第3个插槽。）
old new
----- -----
| A | | E |
| D | | |
| C | |*****|
| | | |
| B | | |
----- -----
点击 new 列表中的某个项目，然后选择该项目并突出显示旧列表中的原始广告位，该列表现已成为目标。再次单击该项目会将其返回到原始插槽。
new 列表还应显示某种指示符，以显示它具有可选区域，可能是插槽中不显眼的（低不透明度）编号按钮或其他一些信息提供。
2）另一种方法是允许用户在原始位置和所需位置之间绘制线条。
无论选择哪种方法，这个过程都不需要繁琐：没有理由不能在客户端完成这一切（可以选择保存并提交对服务器的更改）。
答案 6 :(得分：4)
通过点击标题进行排序非常受欢迎。但是，也许只考虑对实际列表的视图进行重新排序。
答案 7 :(得分：4)
实现复制/粘贴样式功能？这意味着您可以从列表中取出一个项目，然后选择另一个项目，然后单击“粘贴”或CTRL + V.这非常直观，可以轻松操作大型列表。
您可以轻松实现多项选择以移动大块相邻项目。
网络流量很低（只有一两个请求）。
您需要确保“粘贴”是一致的。即粘贴总是插入所选项目上方。
请查看Checkvist获取更多灵感。
答案 8 :(得分：3)
您也可以使用箭头键上下移动。
答案 9 :(得分：3)
我实际上认为iphone / itouch在移动应用程序图标时表现非常好。
如果您还没有看到它，请查看此处：http://www.youtube.com/watch?v=qnXoGnUU6uI
'摇动'图标是一个非常好的视觉提示，可以移动/拖动。
所以我会建议这种方法拖一下。单击并按住某个项目可以将其置于“可移动模式”，这将通过它摇动（或更容易编码视觉提示）来指示。然后拖放将以正常方式工作。
在javascript中实现这一点当然是挑战......
另外还要考虑的另一件事 - 大多数人都犯了将可用性与可学习性混为一谈的错误。想想这个应用程序的用户是谁（他们会定期使用它并教会如何使用它，或者他们是不经常使用它而不会被教导如何使用它的公共网络用户） - 它可能会给你一个不同的答案解决方案应该是什么。答案 10 :(得分：2)
对我来说，执行列表元素的拖放（即在列表本身内）是最好的方法。
不仅可以让用户直接了解他们的列表会是什么样子（列表在他们眼前重新组织），但是他们也很容易理解移动机制。 这是让用户以最短的移动次数排序列表的最简单方法。
顺便说一下，预测列表可能比几个元素长，除了DnD方法，您还可以提供一种异步方式来排序列表：让用户能够将订购号归属于每个条目，然后单击在“订单”按钮上。 以智能和正确的方式处理用户的输入，这可以加快列表编辑的速度。
答案 11 :(得分：2)
我在考虑“选择移动到这里”：
这里的边缘情况是应该将项目移动到列表的任何一端。解决这个问题的一种方法是在目标之前移动所有选定的项目，并在末尾预留一个特殊的按钮/图标以在那里移动选择。
答案 12 :(得分：1)
我发现以下是无论列表大小如何都可以指定商品顺序的最快方法：
1）如果用户想设置列表/网格项目的顺序，则单击“重新排序”按钮。
2）这将打开可与任何列表或网格一起使用的重新排序对话框。
3）在对话框中，所有项目均按其当前顺序显示在左侧列表中。右边有一个空列表。
4）用户以所需顺序单击左侧列表中的项目。单击某个项目后，该项目将从左侧列表中删除，并放置在右侧列表中的下一个位置。在最坏的情况下，如果每个商品都需要一个新订单，那么重新排序就可以对点击次数为N的N个商品进行排序。
5）然后，用户可以应用新订单或取消订单。应用该顺序将导致数据的“显示顺序”字段设置为右侧列表中项目的最终顺序。您可以决定是否仅在左侧列表为空时才启用“应用”按钮。
6）在订购对话框中还可以使用以下控件：
a）一个按钮，用于将所有项目从左侧列表移至右侧列表，并保持其顺序不变
b）一个按钮，可以通过按原始顺序重新加载左列表并清除右列表来重新开始。
c）一个按钮，用于按字母顺序（或按日期或数字，取决于关键字段是什么）对右列表进行排序
d）在右侧列表中具有拖放功能，可将项目手动拖入顺序。
e）右侧列表中的索引号列，如果对其进行了编辑，则将其移至该位置。
这提供了世界上最好的。如果您有一个庞大的列表，其中仅需要移动几个项目，请将所有项目移到上方，然后将几个项目拖到所需的位置或输入所需的索引。如果您有一个小的清单需要完全重新排序，则只需按所需顺序单击项目即可。依此类推。
我已经使用这种方法很多年了，并且非常有效。
答案 13 :(得分：0)
您可以像Google为SearchWiki所做的那样显示“向上”和“删除”按钮。大多数人现在至少有一些经验。大多数人只会选择'Upping'来打扰他们。如果他们不喜欢某件事，并希望对其进行投票，那么借助上述“删除”按钮从列表中删除对他们来说将更容易
答案 14 :(得分：0)
将鼠标悬停在元素上时，可以显示叠加层。此叠加显示4个箭头（n / e / s / w），您可以相应地单击并移动元素。
如果你试图在像facebook和picasaweb的照片分组功能这样的网格中输入项目，那么这就是解决这个问题的唯一方法
如果您有3列，每列都有一个项目列表，点击任何项目都会将项目向左或向右移动，中间列可以显示左侧或右侧的选项。您仍然可以使用典型功能进行拖放或排序。