求支持元素局部拖拽、可调整大小的React库及react-moveable使用方案

一、基于react-moveable的现有解决方案 #

react-moveable本身支持指定拖拽触发区域（dragHandle），只需配置该属性，即可让组件仅在特定区域响应拖拽，内部区域保留正常交互能力。

核心实现代码示例：

import React, { useRef } from 'react';
import Moveable from 'react-moveable';

const CustomDraggableBox = () => {
  const boxRef = useRef(null);
  const dragHandleRef = useRef(null);

  return (
    <div ref={boxRef} style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc' }}>
      {/* 仅这个区域可触发拖拽 */}
      <div 
        ref={dragHandleRef} 
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          width: '100%', 
          height: '30px', 
          backgroundColor: '#f5f5f5',
          cursor: 'move',
          display: 'flex',
          alignItems: 'center',
          paddingLeft: '8px',
          fontSize: '14px'
        }}
      >
        拖拽标题栏
      </div>
      {/* 内部可交互内容 */}
      <div style={{ padding: '40px 10px' }}>
        <input type="text" placeholder="这里可以输入内容" style={{ width: '100%', padding: '6px' }} />
        <button style={{ marginTop: '10px' }}>内部可点击按钮</button>
      </div>

      <Moveable
        target={boxRef}
        // 指定拖拽触发的DOM元素
        dragHandle={dragHandleRef}
        // 开启调整大小功能
        resizable={true}
        // 设置可调整大小的手柄位置
        resizeHandle={["top", "right", "bottom", "left", "top-right", "top-left", "bottom-right", "bottom-left"]}
        // 拖拽时更新位置
        onDrag={(e) => {
          e.target.style.transform = e.transform;
        }}
        // 调整大小时更新尺寸
        onResize={(e) => {
          e.target.style.width = `${e.width}px`;
          e.target.style.height = `${e.height}px`;
          e.target.style.transform = e.transform;
        }}
      />
    </div>
  );
};

export default CustomDraggableBox;

关键说明：

• 通过dragHandle属性绑定拖拽触发的DOM节点，只有点击该节点时才会触发拖拽逻辑
• 组件内部的输入框、按钮等元素可正常响应点击、输入等交互
• 保留resize功能，通过resizeHandle配置可调整大小的边缘/角落

二、替代库推荐 #

1. react-draggable + react-resizable（轻量组合） #

两个专注单一功能的库组合使用，灵活性高，适合基础需求场景：

import React from 'react';
import Draggable from 'react-draggable';
import { ResizableBox } from 'react-resizable';

const CombinedInteractiveBox = () => {
  return (
    <Draggable handle=".drag-handle">
      <ResizableBox
        width={300}
        height={200}
        resizeHandles={['s', 'e', 'se']}
        style={{ border: '1px solid #ccc', position: 'relative' }}
      >
        <div className="drag-handle" style={{ 
          position: 'absolute', 
          top: 0, 
          right: 0, 
          width: '30px', 
          height: '100%', 
          backgroundColor: '#eee',
          cursor: 'ew-resize' 
        }} />
        <div style={{ padding: '10px' }}>
          <textarea placeholder="内部可编辑文本区域" style={{ width: '100%', height: '100%' }} />
        </div>
      </ResizableBox>
    </Draggable>
  );
};

export default CombinedInteractiveBox;

2. react-rnd（集成式解决方案） #

一站式集成拖拽和调整大小功能，支持指定拖拽手柄，开箱即用：

import React from 'react';
import Rnd from 'react-rnd';

const RndInteractiveBox = () => {
  return (
    <Rnd
      default={{
        x: 50,
        y: 50,
        width: 300,
        height: 200,
      }}
      dragHandleClassName="drag-handle"
      style={{ border: '1px solid #ccc', position: 'relative' }}
    >
      <div className="drag-handle" style={{ 
        position: 'absolute', 
        bottom: 0, 
        left: 0, 
        width: '100%', 
        height: '25px', 
        backgroundColor: '#f0f0f0',
        cursor: 's-resize' 
      }} />
      <div style={{ padding: '10px' }}>
        <label>
          <input type="checkbox" /> 内部可勾选选项
        </label>
        <p>内部文本内容可选中复制</p>
      </div>
    </Rnd>
  );
};

export default RndInteractiveBox;

内容的提问来源于stack exchange，提问作者Dima Malko