（含react-draggable库以及相关BUG如何解决）固定在左上方某盒子内（如按钮）添加可拖动功能，使用react hook语法实现

原生写法

复制代码

// 封装组件
import React, { useState, useRef } from 'react';

const DraggableModal = ({ children }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const modalRef = useRef(null);

  const handleMouseDown = (e) => {
    const modal = modalRef.current;
    const startX = e.clientX - modal.offsetLeft;
    const startY = e.clientY - modal.offsetTop;

    const handleMouseMove = (e) => {
      setPosition({
        x: e.clientX - startX,
        y: e.clientY - startY
      });
    };

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

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  return (
    <div
      ref={modalRef}
      style={{ position: 'absolute', left: position.x, top: position.y }}
    >
      <div style={{ cursor: 'move' }} onMouseDown={handleMouseDown}>
        Drag Me
      </div>
      {children}
    </div>
  );
};

export default DraggableModal;




// 使用
<DraggableModal>
  <ModalContent />
</DraggableModal>

使用库并处理拖动和点击事件重叠问题

复制代码

// 使用库实现功能
你可以使用react-draggable库来实现这个功能。首先安装react-draggable库：

```
npm install react-draggable
```

然后在你的组件中引入react-draggable库，并使用它来包裹你想要添加可拖动功能的按钮：

```jsx
import React from 'react';
import Draggable from 'react-draggable';

const DraggableButton = () => {
  let isDragging = false;

  const handleDrag = () => {
    isDragging = true;
  };
  const handleStop = () => {
    console.log('handleStop');

    // 触发 onStop 后会触发 onClick，加个 setTimeout 是为了让修改不"马上"发生，导致 handleClick 拿到的不是预期的结果
    setTimeout(() => (isDragging = false), 0);
  };

  const handleClick = () => {
    console.log('handleClick');

    if (isDragging) {
      return;
    }

    console.log('啊，我被 click 了');
  };

  return (
    <Draggable onDrag={handleDrag} onStop={handleStop}>
      <button onClick={handleClick} style={{ position: 'fixed', bottom: 0, right: 0 }}>可拖动按钮</button>
    </Draggable>
  );
}

export default DraggableButton;

解决库和Antd Tooltip配置使用无法拖动

复制代码

可以尝试使用`react-draggable`的`handle`属性来指定拖动的句柄，避免事件冲突。
示例代码如下：


<Draggable handle=".drag-handle">
  <div>
    <Button className="drag-handle">
      Hover me
      <Tooltip title="Tooltip text">
        <QuestionCircleOutlined />
      </Tooltip>
    </Button>
  </div>
</Draggable>

移动端或PC端如何判断react-draggable包裹的组件时点击还是移动（含移动位置判断），用reack hook代码实现

复制代码

// 判断是否点击还是移动

import React, { useState } from 'react';
import Draggable from 'react-draggable';

const DraggableComponent = () => {
  const [isDragging, setIsDragging] = useState(false);

  const handleTouchStart = (e) => {
    setIsDragging(false);
  };

  const handleTouchMove = (e) => {
      setIsDragging(true);
  };

  const handleTouchStop = () => {
    if (!isDragging) {
        // 没在拖动
    }
    settimeout(() => {
        setIsDragging(false)
    }, 0)
  }

  return (
    <Draggable
      onStart={handleTouchStart}
      onDrag={handleTouchMove}
      onStop={handleTouchStop}
    >
      <div style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Drag me
      </div>
    </Draggable>
  );
};

export default DraggableComponent;






// 下方是判断移动位置

import React, { useState } from 'react';
import Draggable from 'react-draggable';

const DraggableComponent = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(null);
  const [startY, setStartY] = useState(null);

  const handleTouchStart = (e) => {
    setStartX(e.touches[0].clientX);
    setStartY(e.touches[0].clientY);
    setIsDragging(false);
  };

  const handleTouchMove = (e) => {
    const moveX = e.touches[0].clientX;
    const moveY = e.touches[0].clientY;

    if (Math.abs(moveX - startX) > 5 || Math.abs(moveY - startY) > 5) {
      setIsDragging(true);
    }
  };

  const handleTouchStop = () => {
    setIsDragging(false)
  }

  return (
    <Draggable
      onStart={handleTouchStart}
      onDrag={handleTouchMove}
      onStop={handleTouchStop}
    >
      <div style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Drag me
      </div>
    </Draggable>
  );
};

export default DraggableComponent;