SortableJS实现Notion风格的拖拽排序效果

核心需求分析

在SortableJS中实现类似Notion的拖拽排序效果，需要满足两个关键特性：

1. 拖拽过程中保留原始项位置（不立即重新排序）
2. 拖拽时仅显示位置指示线而非完整项

技术实现方案

占位保留机制

通过onStart事件处理函数创建静态占位元素：

onStart(e) {
  const index = Math.max(e.oldIndex, 0)
  const clone = e.from.insertBefore(
    e.item.cloneNode(true),
    e.from.children[index]
  )
  clone.classList.add('sortable-placeholder')
  clone.classList.remove('sortable-chosen', 'sortable-ghost')
}

这段代码会在拖拽开始时：

• 获取原始位置索引
• 创建完全克隆的副本元素
• 将副本插入原始位置作为占位符
• 移除干扰样式类

视觉指示线优化

通过CSS定制拖拽指示器样式：

/* 隐藏默认拖拽项内容 */
.sortable-ghost {
  display: block;
  width: 100%;
  opacity: 0;
  border: none;
}

/* 创建蓝色指示线 */
.sortable-ghost:before {
  content: '';
  position: absolute;
  top: -1.5px;
  width: 100%;
  height: 3px;
  background: #4285f4;
  border-radius: 3px;
  animation: fadeIn 250ms ease;
}

关键样式要点：

• 完全透明化原始拖拽项
• 使用伪元素创建视觉指示线
• 添加平滑的渐显动画效果

进阶优化建议

1. 状态管理：建议为占位元素添加特定data属性，便于后续处理

2. 性能优化：对于大型列表，可使用轻量级占位元素替代完整克隆

3. 交互反馈：可添加拖拽区域的hover效果增强用户体验

4. 响应式适配：指示线样式需要针对移动端触控操作进行尺寸调整

浏览器兼容性说明

该方案主要依赖现代CSS特性，如需支持IE11等旧浏览器，需要：

• 替换CSS动画为JavaScript实现
• 添加必要的polyfill
• 测试DOM操作兼容性

通过以上方案，开发者可以完美复现Notion风格的拖拽交互体验，既保持界面整洁，又提供明确的位置反馈。