next.js React：如何创建一个带有draggable的拖动句柄？

flseospp 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(124)

我无法找到一个答案，如何使一个reactcomponent拖动只有当Drag Button被点击（Clicking anything inside the element wont trigger the drag event）
下面是Material UIJSX代码：

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

看起来像这样：

我想使元素仅在单击Drag Button时可拖动
单击元素内的任何内容都不会触发drag事件，但Drag Button除外

我应该做什么工作？

next.js

来源：https://stackoverflow.com/questions/76453911/react-how-to-create-a-drag-handle-with-draggable

1条答案

按热度按时间

wvt8vs2t1#

您需要更新单击按钮时的状态。

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>

赞(0）回复(0）举报 2023-06-22

我来回答

next.js React：如何创建一个带有draggable的拖动句柄？

1条答案

相关问题

热门标签

最新问答