改进有爱饭友列表拖拽排序时的用户体验

[riophae]

之前存在问题是，列表中的头像本身是一个链接，既可以点击打开相应用户的个人页面也可以拖拽排序。但是后者监听的 mousedown 事件会和前者的 click 事件冲突。

我们使用的 react-sortable-hoc 模块给出了三种解决方案。distance 参数和 pressDelay 参数两种方案体验都不是很好，拖拽响应比较慢。而第三种使用 SortableHandle 的方案，因为拖拽和点击区域可以分开，因此不存在上述问题，但是需要专门设计 SortableHandle（即表示“可拖拽”的元素）的样式。

于是参考这篇文章设计了拖拽排序用户体验，最终采用了类似 Gmail 的设计。当鼠标指针放到头像上时，头像上方显示一片点状图案提示用户，用户按住这块区域可以拖拽。注意鼠标指针的变化。

但是目前仍然存在一些问题：

1. 拖拽过程中鼠标指针不能变成攥住的样式（cursor: grabbing），尝试了多种办法都还是没能解决。现在的实际情况为，用户释放拖拽的一瞬间，指针会变成攥住的样式，然后马上恢复普通状态。这个很怪异，猜测可能是 Chrome 的 bug，和 pointer-events 有关系。（即便上图里，指针变化也是有延时的，有点不正常）
2. 如果列表存在多行，拖拽后面的头像到前面一行，这行的最后一个头像不会被挤到下面一行去。应该是 react-sortable-hoc 的 bug。
3. lockToContainerEdges 参数现在没有效果。

这几个问题基本上不影响用户使用，留待以后解决。