用于重新排列列表项的用户界面
我有一个项目的列表作为一个Web应用程序的一部分。 问题是用户如何操作列表中的项目顺序（而不是列表sorting顺序）。 典型的方法是使用箭头button向上或向下移动项目。 另一种方式是拖放。
但是有没有其他的方式为列表重新sorting的用户界面？
还有其他两种sorting方法（除了你提到的），我已经看到哪些工作很好。
点击移动
用于订购Gallerynetworking相册中的项目的方法对于订购照片非常有效，对于任何可以表示为可点击元素sorting组的集合，它都可以正常工作：
- 将您的物品列表显示为可点击的元素。
- 点击一个元素“select”它，它被突出显示，表示它被选中。
- 点击另一个项目将所选项目移动到点击项目之前的位置。
- 重复，直到所有的项目是在所需的顺序。
- 在列表的末尾显示一个虚拟项目，用于将项目移动到最后。
这比拖放更容易，因为它需要较less的灵活性，而且您不必在按住鼠标button的同时找出想要“放下”项目的位置。
该方法可以很容易地扩展，以允许select多个项目（通过移位点击或类似），然后可以以相同的方式放置在新的位置。
提供订单号码
Netflix和我一起使用的一些内部应用程序使用。 如果您的用户具体具体了解数字顺序应该是什么（在使用内部应用程序中的指令步骤列表时使用），这种方式效果最佳。
- 出示您的项目列表每行一个。
- 在显示订单号的每个项目旁边提供一个文本input框，从1开始。
- 用户根据需要更改文本字段中的订单号。
- 如果多个项目被赋予相同的订单号码，则它们彼此相邻放置。
- 提供一个button，用于在JavaScript中“应用”sorting，以便用户不必提交整个页面即可查看重新排列的列表。 这使得增量工作变得容易。
编辑：一些额外的想法拖放 。 你以前可能已经使用过这些，但是有一些东西可以让拖放变得更加宽容，也更容易使用：
- 突出显示项目在下降时出现的区域。 例如，显示两个现有项目之间突出的水平线，如果项目被丢弃，项目将被插入。
- Ghost可拖动的项目，因为它被拖动，这是显而易见的东西被移动，而不是使用通用的“拖动”光标。 如果被拖动的项目如果透明地显示在彼此之上，则这仍然是最好的。
- 确保可拖放的目标区域足够大。 较大的区域可以帮助那些在协调中遇到麻烦的人。
我们发现，对于非技术人员来说，拖放是非常直观的。 我们已经探索了向上箭头这个工作，但也可以是繁琐的，因为你需要保持点击上下，它会导致大量的stream量。
我们探索的另一个范例是移动button，因此当您点击一个列表中的每个项目时，都会在列表中的每个项目之前和之后添加新的button，以便将项目移动到任何位置。
当列表中的每个项目占用大量空间时，这种方式很有效，如果每个列表项只有一行，就会导致界面混乱。 在我们的例子中，每个项目都是半行或更多的文本。 我们还在每个项目之前/之后添加项目button以允许插入。
Survey Monkey也使用这种模式，并启发了我们所做的一些事情。
一些想法 – 非常多的想法，而不是执行结束，但…
1 – 提供向上和向下的箭头和拖放，并监视哪些更受欢迎，哪种types的用户使用哪些等，然后从那里量身定制一旦你有一些数据
2 – 添加一个随机生成顺序的“随机”button可能是无用的，取决于您的应用程序可能很有趣
3 – 在每个项目的旁边添加一个“显示顺序”字段，并允许用户操作它（但是确保你有一些代码来自动更新其余的数字，当一个变化）我个人认为这可能是非常令人困惑，但对于一些用户来说，它可能工作
4 – 而不是拖放到位，用户拖动到一个新的列表
5 – 对于一个非常简单的版本，有一个“最喜欢的”checkbox，然后让该列表首先显示collections夹（按字母顺序或其他）
6 – 有团体 – 你给一个项目分配一个团体号码，所有的团体号码首先出现，然后是第二组等
希望这个随机散漫是有用的，如果我想到更多的东西，我会回来…
您可以使用jQuery UI Sortables的示例进行拖放实验。 为了让非技术用户或新用户明白，可以使用诸如手柄或箭头之类的视觉线索，也可以使用hover时的工具提示来提示拖动元素。
你甚至可以提供一个animation的gif来展示这个动作。
只要用户学习如何做到这一点，我认为这是订购清单最简单的方法。
另一种方法是在每个项目旁边提供一个小文本input，这样用户可以自己input数字顺序; 然后他们点击一个button重新排列一次。 （我只看到这个用于存储项目顺序的网站，例如Netflix队列或Livejournal链接。）
1） 点击移动的变化将涉及具有单独的目标列表，其中用户select其物品将移动到的插槽，然后单击原始项目以移动它。
例如，在下图中，用户已经将“E”放在重新sorting的列表的头部，并且已经select了第三个插槽以供他们的下一个select。 他们的下一步是select旧列表中的哪个项目进入新列表中的第三个插槽。 （星号的排是一个微弱的尝试，表明插槽3突出显示或select。）
old new ----- ----- | A | | E | | D | | | | C | |*****| | | | | | B | | | ----- ----- 点击新列表中的一个项目选中它，并突出显示旧列表中的原始插槽，该列performance在成为目标。 再次单击该项目将其返回到原始插槽。
新的列表还应该显示某种指标，以显示它具有可select的区域，也许在其插槽中具有不显眼的（低不透明度）编号button或一些其他信息可供性。
2）另一种方法是允许用户在原始位置和所需位置之间画线。
无论select什么方法，这个过程都不需要喋喋不休：没有任何理由不能把所有的东西都做到客户端（可以select保存和提交对服务器的修改）。
通过点击标题进行sorting非常受欢迎。 虽然也许只被认为是对实际列表视图的重新sorting。
实现复制/粘贴样式function？ 这意味着您可以从列表中取出一个项目，然后select另一个项目，然后单击“粘贴”或CTRL + V。 这很直观，可以轻松地处理大型列表。
您可以轻松实现多项select来移动大块相邻的项目。
networkingstream量会很低（只有一个或两个请求）。
你需要确保“粘贴”是一致的。 即粘贴总是插入选定的项目之上。
看看Checkvist更多的灵感。
您也可以使用箭头键上下移动。
我实际上认为iphone / itouch在移动应用程序图标时确实做得很好。
如果您还没有看到它，请看这里： http ： //www.youtube.com/watch？v = qnXoGnUU6uI
“摇动”图标是一个非常好的视觉提示，某些东西是可移动的/可拖动的。
所以我会build议这个方法拖放。 点击并按住一个项目可以把它放在'可移动模式'，这将表示它晃动（或一些更容易编码视觉提示）。 然后拖放将以正常的方式工作。
在JavaScript中实现这一点当然是挑战…
还有一件事要考虑 – 大多数人犯了可用性与可学性混淆的错误。 想想这个应用程序的用户是谁（他们会定期使用它，学习如何使用它，或者他们是公共Web用户，他们可能不经常使用它，而不会被教会如何使用它） – 它可能会给你一个不同的答案应该是什么解决scheme。
对我来说，执行列表元素的拖放（即在列表本身内）是最好的方法。
您不仅可以向用户提供他们的列表（列表在他们眼前重组）的直接构想，而且他们也很容易理解移动机制。 这是最简单的方法，让您的用户以最短的次数下单。
顺便说一句，预见列表可能比less数几个元素长，除了DnD方法外，还可以提供asynchronous方式来排列列表：给用户赋予每个条目一个sorting号的能力，然后单击“订单“button。 以一种智能和正确的方式处理用户的input，这可能会导致更长的列表编辑速度。
我正在考虑“搬到这里”：
- 让所有项目都可以通过checkbox来select
- 让所有项目都有一个button或图标，意思是“移动到这里”
- 当点击“移动到这里”时，所有select的项目将以现有顺序移动到该项目
这里的边缘情况是当项目应该移动到列表的任何一端。 解决这个问题的方法之一是将所有选定的项目移动到目标之前，并在最后保留一个特殊的button/图标，以在那里移动select。
您可以像Google一样为SearchWiki显示“上”和“删除”button。 现在大多数人至less有一些经验。 大多数人只会在“Upping”的select上感到困扰。 如果他们不喜欢某个东西，并且想要降低它的音量，那么在上面的“删除”button的帮助下从列表中删除将会更容易
将鼠标hover在某个元素上时，可以显示叠加层。 这个覆盖显示你4个箭头（N / E / S / W），你可以点击并相应地移动元素。
如果您正在尝试通过Facebook和picasaweb的照片分组function在网格中添加项目，那么这是处理该问题的唯一方法
如果您有3列，每列有一个项目列表，点击任何项目将移动项目向左或向右，中间列可以显示左侧或右侧的选项。 您仍然可以使用该function的典型function进行拖放或sorting。
