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

src/features/favorite-fanfouers/script(page)[home].js

@@ -19,6 +19,7 @@ const USER_GUIDE = [
 ].join('\n')
 const CONFIRMING_MESSAGE = '确定要清空有爱饭友列表吗？请注意这个操作无法撤回。'
 const CLASSNAME_ITEM = 'sf-favorite-fanfouer-item'
+const CLASSNAME_SORTABLE_HELPER = 'sf-favorite-fanfouer-sortable-helper'
 const STORAGE_KEY_COLLAPSED_STATE = 'favorite-fanfouers/isCollapsed'
 const STORAGE_AREA_NAME_COLLAPSED_STATE = 'local'
 
@@ -62,14 +63,15 @@ export default context => {
   const SortableItem = sortableElement(({ item, instance }) => (
     <li key={item.userId} className={CLASSNAME_ITEM}>
       <a href={getProfilePageUrl(item.userId)} title={item.nickname}>
-        <DragHandle item={item} instance={instance} />
+        <DragHandle />
+        <img src={item.avatarUrl} alt={`@${item.nickname} 的头像`} onClick={event => instance.onClickAvatar(event, item)} />
         <span>{item.nickname}</span>
       </a>
     </li>
   ))
 
-  const DragHandle = sortableHandle(({ item, instance }) => (
-    <img src={item.avatarUrl} alt={item.nickname} onClick={event => instance.onClickAvatar(event, item)} />
+  const DragHandle = sortableHandle(() => (
+    <div className="sf-drag-handle" />
   ))
 
   class FavoriteFanfouers extends Component {
@@ -161,14 +163,12 @@ export default context => {
         instance: this,
         items: this.state.friendsData,
         axis: 'xy',
-        distance: 5,
+        helperContainer: this.getSortableHelperContainer,
+        helperClass: CLASSNAME_SORTABLE_HELPER,
         lockToContainerEdges: true,
         useDragHandle: true,
-        onSortEnd: ({ oldIndex, newIndex }) => {
-          const newValue = arrayMove(this.state.friendsData, oldIndex, newIndex)
-
-          this.setFriendsList(newValue)
-        },
+        transitionDuration: 200,
+        onSortEnd: this.onSortEnd,
       }
 
       return (
@@ -180,6 +180,16 @@ export default context => {
       this.list = element
     }
 
+    getSortableHelperContainer = () => {
+      return this.list
+    }
+
+    onSortEnd = ({ oldIndex, newIndex }) => {
+      const newValue = arrayMove(this.state.friendsData, oldIndex, newIndex)
+
+      this.setFriendsList(newValue)
+    }
+
     onClickAvatar = async (event, item) => {
       if (!event.shiftKey) return
       event.preventDefault()

src/features/favorite-fanfouers/style(page)[home].less

@@ -1,16 +1,10 @@
-@import "shared";
-
 #sf-favorite-fanfouers-list {
   margin-bottom: 15px;
 
   p {
     margin-right: 15px;
   }
 
-  ul li {
-    transition: opacity @transitionDuration;
-  }
-
   ul li.drag-source,
   ul li.dragover {
     opacity: 0.5;
@@ -34,28 +28,66 @@
   }
 }
 
-// 修正拖拽过程的样式
 .sf-favorite-fanfouer-item {
-  list-style: none;
-  z-index: 10;
-
   a {
-    display: block;
-    width: 48px;
-    height: 72px;
-    overflow: hidden;
+    position: relative;
   }
 
-  img {
-    border-radius: 4px;
-    width: 100%;
+  // 因为这个元素尺寸比较小，使实际响应区域大于可见区域，避免用户难以点击到
+  .sf-drag-handle {
+    @offset: 2px;
+    @height: 7px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: @height + @offset * 2;
+    opacity: 0;
+    cursor: grab;
+
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+    }
+
+    &::before {
+      top: @offset;
+      left: @offset;
+      right: @offset;
+      height: @height;
+      background: rgba(255, 255, 255, 0.85);
+      border-radius: 4px;
+    }
+
+    &::after {
+      @dotsSize: 3px;
+      @dotsOffset: 4px;
+
+      left: @offset + @dotsOffset;
+      right: @offset + @dotsOffset;
+      height: 100%;
+      background-position: center;
+      background-image: url("~@assets/images/drag-handle-dots.png");
+      background-repeat: repeat-x;
+      background-size: @dotsSize;
+      opacity: 0.25;
+    }
+  }
+
+  &:hover .sf-drag-handle {
+    opacity: 1;
   }
+}
+
+.sf-favorite-fanfouer-sortable-helper {
+  pointer-events: auto !important;
 
-  span {
-    display: block;
-    line-height: 175%;
-    white-space: nowrap;
-    text-align: center;
+  .sf-drag-handle {
+    opacity: 1;
+    cursor: grabbing !important;
   }
 }
 

src/features/favorite-fanfouers/style(page)[user-profile].less

@@ -1,4 +1,4 @@
-@import "shared";
+@transitionDuration: 200ms;
 
 #avatar {
   position: relative;