毒舌时刻

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

各位前端同行，咱们今天聊聊前端拖拽交互。别告诉我你还在用原生的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像跳广场舞，专业库像跳芭蕾。别做广场舞大妈，做芭蕾舞蹈家。