前端拖拽交互实现：从原生 API 到专业库

前端拖拽交互实现：从原生 API 到专业库

为什么需要更好的拖拽体验

在近期项目中，发现部分拖拽功能仍依赖原生 HTML5 拖拽 API 实现，存在卡顿、不流畅等问题，严重影响用户体验。因此，选择合适的拖拽方案至关重要。

原生 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');
  // 处理逻辑
}

推荐方案与实践

1. 使用 react-beautiful-dnd

适用于 React 项目，提供流畅的拖拽体验。

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { useState } from 'react';

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

通用拖拽库，支持多种框架及原生 DOM。

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 中使用示例：

<script setup>
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 };
  }
};
</script>

实战技巧

1. 拖拽库选择

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

2. 最佳实践

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

总结

拖拽交互是提升用户体验的关键环节。建议使用成熟的专业库替代原生 API，以获得更流畅的交互体验，同时兼顾移动端适配与无障碍访问。