react如何实现拖拽

实现拖拽的基本方法

在React中实现拖拽功能可以通过原生HTML5的拖拽API或第三方库如react-dnd、react-beautiful-dnd来完成。以下是两种主要方法的详细说明。

使用HTML5拖拽API

HTML5提供了原生的拖拽API，可以直接在React组件中使用。这种方式适合简单的拖拽需求。

import React, { useState } from 'react';

const DragExample = () => {
  const [draggedItem, setDraggedItem] = useState(null);

  const handleDragStart = (e, item) => {
    setDraggedItem(item);
    e.dataTransfer.setData('text/plain', item);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const droppedItem = e.dataTransfer.getData('text/plain');
    console.log('Dropped:', droppedItem);
  };

  return (
    <div>
      <div
        draggable
        onDragStart={(e) => handleDragStart(e, 'Item 1')}
        style={{ padding: '10px', border: '1px solid #ccc', margin: '10px' }}
      >
        Drag Me
      </div>
      <div
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        style={{ padding: '20px', border: '1px dashed #ccc', margin: '10px' }}
      >
        Drop Here
      </div>
    </div>
  );
};

export default DragExample;

使用react-dnd库

react-dnd是一个功能强大的拖拽库，适合复杂的拖拽场景。以下是基本实现步骤。

安装依赖：

npm install react-dnd react-dnd-html5-backend

示例代码：

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'ITEM';

const DraggableItem = ({ name }) => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemType,
    item: { name },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        padding: '10px',
        border: '1px solid #ccc',
        margin: '10px',
        cursor: 'move',
      }}
    >
      {name}
    </div>
  );
};

const DropTarget = () => {
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: ItemType,
    drop: (item) => console.log(`Dropped ${item.name}`),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
      canDrop: !!monitor.canDrop(),
    }),
  });

  return (
    <div
      ref={drop}
      style={{
        padding: '20px',
        border: '1px dashed #ccc',
        margin: '10px',
        backgroundColor: isOver ? '#f0f0f0' : 'white',
      }}
    >
      Drop Here
    </div>
  );
};

const DndExample = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <div>
        <DraggableItem name="Item 1" />
        <DraggableItem name="Item 2" />
        <DropTarget />
      </div>
    </DndProvider>
  );
};

export default DndExample;

使用react-beautiful-dnd库

react-beautiful-dnd是另一个流行的拖拽库，特别适合列表排序场景。

安装依赖：

npm install react-beautiful-dnd

示例代码：

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

const initialItems = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
];

const BeautifulDndExample = () => {
  const [items, setItems] = useState(initialItems);

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

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      padding: '10px',
                      border: '1px solid #ccc',
                      margin: '10px',
                      backgroundColor: 'white',
                      ...provided.draggableProps.style,
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default BeautifulDndExample;

注意事项

• 性能优化：对于大量拖拽项，使用虚拟滚动技术（如react-window）可以提升性能。
• 移动端支持：react-dnd和react-beautiful-dnd均支持移动端，但可能需要额外配置。
• 无障碍访问：确保拖拽操作对键盘用户友好，可以通过tabIndex和键盘事件实现。

以上方法涵盖了从简单到复杂的拖拽场景，可以根据具体需求选择适合的方案。