React ContextMenu和Draggable

Question

我正在尝试使用react-draggable和react-contextmenu在ReactJS中制作一个带有自定义上下文菜单的可拖动组件，但没有成功。我已经成功地使按钮可拖动，但当我添加上下文菜单时，它禁用了可拖动，只有上下文菜单起作用。我很乐意以某种方式将它们组合在一起，谢谢！

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

export default function DraggableButton() {
  const [deltaPosition, setDeltaPosition] = useState({ x: 0, y: 0 });  

  const handleDrag = (e, ui) => {
  const { x, y } = deltaPosition;
  setDeltaPosition({
    x: x + ui.deltaX,
    y: y + ui.deltaY,
  });
 };  

return (
  <div>        
    <Draggable
      scale={1}
      onDrag={handleDrag}
      bounds="parent"
      defaultPosition={{ x: 40, y: 40 }}
      allowAnyClick={false}
    >
      <ContextMenuTrigger id='trigger' >
          <div className="w-24">
              <button className="btn btn-primary">
                  click me
              </button>
          </div>
      </ContextMenuTrigger>
    </Draggable>

    <ContextMenu id='trigger'>
        <h1>test</h1>
    </ContextMenu>
  </div>
 );}

Answer 1

尝试在ContextMenuTrigger周围包装Draggable

<ContextMenuTrigger id='trigger'>
  <Draggable
      scale={1}
      onDrag={handleDrag}
      bounds="parent"
      defaultPosition={{ x: 40, y: 40 }}
      allowAnyClick={false}>
      <div className="w-24">
        <button className="btn btn-primary">click me</button>
      </div>
  </Draggable>
</ContextMenuTrigger>

注意:上下文菜单在不同的位置打开，如下所示。

把这个留在这里，因为它可能会帮助其他人。