当前位置：首页 > React

react实现拖拽移动

2026-01-26 21:23:37React

实现拖拽移动的基本思路

在React中实现拖拽移动功能通常需要利用HTML5的Drag and Drop API或第三方库。核心步骤包括监听拖拽事件、更新组件状态以及处理元素位置变化。

使用原生Drag and Drop API

通过React事件监听原生拖拽API实现基础拖拽功能：

react实现拖拽移动

import React, { useState } from 'react';

function DraggableBox() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);

  const handleMouseDown = (e) => {
    setIsDragging(true);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    setPosition({
      x: e.clientX,
      y: e.clientY
    });
  };

  const handleMouseUp = () => {
    setIsDragging(false);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return (
    <div
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        width: '100px',
        height: '100px',
        backgroundColor: 'lightblue',
        cursor: 'move'
      }}
      onMouseDown={handleMouseDown}
    >
      Drag me
    </div>
  );
}

使用react-dnd库

对于复杂场景推荐使用react-dnd库：

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

实现代码示例：

react实现拖拽移动

import { useDrag } from 'react-dnd';

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

  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        cursor: 'move'
      }}
    >
      {text}
    </div>
  );
}

实现可排序列表

结合react-dnd和react-dnd-sortable实现排序功能：

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { SortableContainer, SortableElement } from 'react-dnd-sortable';

const SortableItem = SortableElement(({ value }) => (
  <li>{value}</li>
));

const SortableList = SortableContainer(({ items }) => (
  <ul>
    {items.map((value, index) => (
      <SortableItem key={value} index={index} value={value} />
    ))}
  </ul>
));

function App() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(arrayMove(items, oldIndex, newIndex));
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <SortableList items={items} onSortEnd={onSortEnd} />
    </DndProvider>
  );
}