React : How to create a Drag Handle with draggable?

Question

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?

Answer 1

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>