英文:
React : How to create a Drag Handle with draggable?
问题
以下是翻译好的部分：
我无法找到如何使react组件只能在点击拖动按钮时才能拖动的答案（点击元素内的任何内容都不会触发拖动事件）
以下是Material UI的JSX代码：
<Box
draggable={false}
onDragStart={onDragStart(props.data)}
>
{/* 标题 */}
<div>可拖动元素 1</div>
{/* 按钮：拖动手柄 */}
<div className="test-drag-handle">
<IconButton // MUI 按钮
draggable
onClick={(e) => {}}
sx={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
>
{/* 拖动手柄：图标 */}
<Icon
path={mdiArrowAll}
size={'22px'}
className=""
style={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
/>
</IconButton>
</div>
{/* 按钮：编辑 */}
<Box sx={{
mr: 1
}}>
... 编辑按钮
</Box>
{/* 按钮：克隆 */}
<div className="mr-4">
... 克隆按钮
</div>
{/* 按钮：删除 */}
... 删除按钮
</Box>
看起来是这样的：
我希望只有在点击拖动按钮时才能使元素可拖动
点击元素内的任何内容都不会触发拖动事件，除非点击拖动按钮
我应该怎么做才能实现这个效果？
英文:
I am unable to find an answer on how to make a react component draggable only when the Drag Button is clicked (Clicking anything inside the element wont trigger the drag event)
Here is the Material UI JSX code:
<Box
draggable={false}
onDragStart={onDragStart(props.data)}
>
{/* Title */}
<div>Draggable Element 1</div>
{/* Button : Drag Handle */}
<div className="test-drag-handle">
<IconButton // MUI Button
draggable
onClick={(e) => {}}
sx={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
>
{/* Drag Handle: Icon */}
<Icon
path={mdiArrowAll}
size={'22px'}
className=""
style={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
/>
</IconButton>
</div>
{/* Button : Edit */}
<Box sx={{
mr: 1
}}>
... Edit Button
</Box>
{/* Button : Clone */}
<div className="mr-4">
... Clone Button
</div>
{/* Button : Delete */}
... Delete Button
</Box>
and it looks like this:
I want to make the element draggable only when the Drag Button is clicked
Clicked anything inside the element will not trigger the drag event, except the Drag Button
What should I do it work?
答案1
得分: 0
当按钮被点击时，需要更新状态。
const [disabled, setDisabled] = useState(false);
const toggleDraggable = () => {
setDisabled(!disabled);
};
<Box
draggable={disabled}
onDragStart={onDragStart(props.data)}
>
{/* 标题 */}
<div>可拖动元素 1</div>
{/* 按钮：拖动处理 */}
<div className="test-drag-handle">
<IconButton // MUI 按钮
draggable
onClick={(e) => {toggleDraggable();}}
sx={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
>
{/* 拖动处理：图标 */}
<Icon
path={mdiArrowAll}
size={'22px'}
className=""
style={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
/>
</IconButton>
</div>
{/* 按钮：编辑 */}
<Box sx={{
mr: 1
}}>
... 编辑按钮
</Box>
{/* 按钮：克隆 */}
<div className="mr-4">
... 克隆按钮
</div>
{/* 按钮：删除 */}
... 删除按钮
</Box>
英文:
You need to update the state when the button was clicked.
const [disabled, setDisabled] = useState(false);
const toggleDraggable = () => {
setDisabled(!disabled);
};
<Box
draggable={disabled}
onDragStart={onDragStart(props.data)}
>
{/* Title */}
<div>Draggable Element 1</div>
{/* Button : Drag Handle */}
<div className="test-drag-handle">
<IconButton // MUI Button
draggable
onClick={(e) => {toggleDraggable();}}
sx={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
>
{/* Drag Handle: Icon */}
<Icon
path={mdiArrowAll}
size={'22px'}
className=""
style={{
color: 'rgb(19, 140, 126)',
caretColor: 'rgb(19, 140, 126)'
}}
/>
</IconButton>
</div>
{/* Button : Edit */}
<Box sx={{
mr: 1
}}>
... Edit Button
</Box>
{/* Button : Clone */}
<div className="mr-4">
... Clone Button
</div>
{/* Button : Delete */}
... Delete Button
</Box>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论