当前位置：首页 > React

react拖拽功能实现

2026-01-27 06:22:39React

实现React拖拽功能的方法

React中实现拖拽功能可以通过原生HTML5的拖拽API或第三方库完成。以下是两种主流方法的详细说明：

使用HTML5原生拖拽API

HTML5提供了draggable、ondragstart、ondragover和ondrop等事件，适合基础需求。

react拖拽功能实现

import React, { useState } from 'react';

function DragExample() {
  const [items, setItems] = useState(['Item 1', 'Item 2']);
  const [draggedItem, setDraggedItem] = useState(null);

  const handleDragStart = (index) => {
    setDraggedItem(index);
  };

  const handleDragOver = (e) => {
    e.preventDefault(); // 必须阻止默认行为
  };

  const handleDrop = (targetIndex) => {
    const newItems = [...items];
    const [removed] = newItems.splice(draggedItem, 1);
    newItems.splice(targetIndex, 0, removed);
    setItems(newItems);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={index}
          draggable
          onDragStart={() => handleDragStart(index)}
          onDragOver={handleDragOver}
          onDrop={() => handleDrop(index)}
          style={{ padding: '8px', margin: '4px', border: '1px solid #ccc' }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

关键点：

设置draggable=true使元素可拖拽。
onDragOver必须调用e.preventDefault()以允许放置。
通过状态管理更新元素顺序。

使用第三方库（如react-dnd或react-beautiful-dnd）

对于复杂场景（如跨组件拖拽、列表排序），推荐使用成熟的库。

react拖拽功能实现

react-dnd示例：

import { useDrag, useDrop } from 'react-dnd';

function DraggableItem({ id, text, moveItem }) {
  const [{ isDragging }, drag] = useDrag({
    type: 'ITEM',
    item: { id },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: 'ITEM',
    hover: (draggedItem) => {
      if (draggedItem.id !== id) {
        moveItem(draggedItem.id, id);
      }
    },
  });

  return (
    <div
      ref={(node) => drag(drop(node))}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      {text}
    </div>
  );
}

react-beautiful-dnd示例：

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

function SortableList() {
  const [items, setItems] = useState(['A', 'B', 'C']);

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const newItems = [...items];
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}