毒舌时刻

这代码写得跟网红滤镜似的——仅供参考。

各位前端同行，咱们今天聊聊前端拖拽交互。别告诉我你还在用原生的HTML5拖拽API，那感觉就像在用诺基亚手机——能打电话，但体验太差。

为什么你需要拖拽交互

最近看到一个项目，拖拽功能全靠原生API实现，卡顿、不流畅，用户体验极差，我差点当场去世。我就想问：你是在做拖拽还是在做卡顿生成器？

反面教材

// 反面教材：原生拖拽API
function handleDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
}
function handleDragOver(e) {
  e.preventDefault();
}
function handleDrop(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  // 卡顿的拖拽体验
}

毒舌点评：这代码，我看了都替你的用户着急。原生拖拽API，你是想让用户体验到卡顿的快感吗？

前端拖拽交互的正确姿势

1. 使用react-beautiful-dnd

// 正确姿势：使用react-beautiful-dnd
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function TaskList() {
  const [tasks, setTasks] = useState([
    { id: '1', content: '任务1' },
    { id: '2', content: '任务2' },
    { id: '3', content: '任务3' }
  ]);
  
  const onDragEnd = (result) => {
    if (!result.destination) return;
    
    const items = Array.from(tasks);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    
    setTasks(items);
  };
  
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="tasks">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {tasks.map((task, index) => (
              <Draggable key={task.id} draggableId={task.id} index={index}>
                {(provided) => (
                  <li
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {task.content}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}

2. 使用sortablejs

// 正确姿势：使用sortablejs
import Sortable from 'sortablejs';
function initSortable() {
  const el = document.getElementById('sortable-list');
  
  new Sortable(el, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    dragClass: 'sortable-drag',
    onEnd: (evt) => {
      console.log('从', evt.oldIndex, '移动到', evt.newIndex);
    }
  });
}
// Vue3中使用
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';
export default {
  setup() {
    const listRef = ref(null);
    
    onMounted(() => {
      new Sortable(listRef.value, {
        animation: 150,
        onEnd: (evt) => {
          // 更新数据顺序
        }
      });
    });
    
    return { listRef };
  }
};

毒舌点评：早这么写，你的拖拽早流畅了。别告诉我你还在用原生API，那你还是趁早去用jQuery UI吧。

实战技巧：拖拽交互指南

1. 拖拽库选择

• react-beautiful-dnd：React拖拽，体验好
• sortablejs：通用拖拽库
• dnd-kit：现代React拖拽
• interact.js：手势交互库

2. 最佳实践

1. 动画流畅：添加过渡动画
2. 视觉反馈：拖拽时高亮
3. 触摸支持：移动端适配
4. 无障碍：键盘操作支持

最后想说的

拖拽交互不是炫技，是提升用户体验。别再只会用原生拖拽了——用好拖拽库，你的交互会更流畅。

拖拽就像跳舞，原生API像跳广场舞，专业库像跳芭蕾。别做广场舞大妈，做芭蕾舞蹈家。