React ContextMenu and Draggable

Question

我正试图在ReactJS中使用自定义上下文菜单制作一个可拖动组件CCD_ 1和CCD_。我已经成功地使按钮可拖动，但当我添加上下文菜单时，它会禁用可拖动功能，只有上下文菜单可以工作。我很想以某种方式把它们结合在一起，谢谢！

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

尝试将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>

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

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