React：如何创建可拖动的拖动手柄？

Question

我无法找到如何使

react

component

仅在单击

Drag Button

时才可拖动的答案 (

Clicking anything inside the element wont trigger the drag event

)

这是

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

它看起来像这样：

我想让元素仅在单击

Drag Button

时才可拖动

单击元素内的任何内容都不会触发

drag

事件，除了

Drag Button

之外

我应该怎么做才有效？

Answer 1

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

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>