我找不到一個(gè)關(guān)于如何使一個(gè)react組件只在點(diǎn)擊拖動(dòng)按鈕時(shí)才可拖動(dòng)的答案(點(diǎn)擊元素內(nèi)部的任何東西都不會(huì)觸發(fā)拖動(dòng)事件)

下面是材料UI JSX代碼:

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

看起來是這樣的:

我想讓元素只有在單擊拖動(dòng)按鈕時(shí)才可拖動(dòng)

單擊元素內(nèi)部的任何內(nèi)容都不會(huì)觸發(fā)拖動(dòng)事件，但拖動(dòng)按鈕除外

我應(yīng)該做什么工作？

您需要更新按鈕被單擊時(shí)的狀態(tài)。

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>