React ContextMenu 和 Draggable答案

【问题标题】：React ContextMenu and DraggableReact ContextMenu 和 Draggable
【发布时间】：2021-03-27 12:32:43
【问题描述】：

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

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>
 );}

【问题讨论】：

标签： javascript reactjs react-hooks contextmenu draggable

【解决方案1】：

尝试将Draggable 包裹在ContextMenuTrigger 周围：

<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>

注意：上下文菜单会在不同的位置打开。

将其留在这里，因为它可能对其他人有所帮助。

【讨论】：