Here you go :

To draw a Xarrow you need a starting point and ending point

• Start point : will always be dragging from


• End Point : Where you are dropping

Here We have 2 refs ,

• ref0 : Starting drag point ( which will be the box )


• ref1 : Draggable point ( Will be the draggable point )

Here is the code that needs to be changed, please do read the comments also, that will make the flow clear.

const ConnectPointsWrapper = ({ boxId, handler, ref0 }) => {

    const ref1 = useRef();



    const [position, setPosition] = useState({});

    const [beingDragged, setBeingDragged] = useState(false);

    return (

        <React.Fragment>

            <div

                className="connectPoint"

                ref={ref1} // <---- referencing the point

                style={{

                    ...connectPointStyle,

                    ...connectPointOffset[handler],

                    ...position // <----- Updating the position as we drags

                }}

                draggable

                onDragStart={e => {

                    setBeingDragged(true);

                    e.dataTransfer.setData("arrow", boxId);

                }}

                onDrag={e => {

                    setPosition({ // <---- Setting up the position to draw line as we drags

                        position: "fixed",

                        left: e.clientX,

                        top: e.clientY,

                        transform: "none",

                        opacity: 0

                    });

                }}

                onDragEnd={e => {

                    setPosition({});

                    setBeingDragged(false);

                }}

            />

            {beingDragged ? <Xarrow start={ref0} end={ref1} /> : null} // <---- this will draw the arrow b/w ref0 and ref1

        </React.Fragment>

    );

};



const Box = ({ text, handler, addArrow, boxId }) => {

    const ref0 = useRef(); 

    return (

        <div

            id={boxId}

            style={boxStyle}

            ref={ref0} // <---- referencing the box it self

            onDragOver={e => e.preventDefault()}

            onDrop={e => {

                if (e.dataTransfer.getData("arrow") === boxId) {

                    console.log(e.dataTransfer.getData("arrow"), boxId);

                } else {

                    const refs = { start: e.dataTransfer.getData("arrow"), end: boxId };

                    addArrow(refs);

                }

            }}

        >

            {text}

            <ConnectPointsWrapper {...{ boxId, handler, ref0 }} /> // <---- Passing the `ref0` to `ConnectPointsWrapper` to draw line from point

        </div>

    );

};

WORKING DEMO :

NOTE :

I was trying to set style just via ref1 and not with setPosition,
you can check the below code snippet for that,

<div

        className=connectPoint

        style={{

          ...connectPointStyle,

          ...connectPointOffset[handler]

        }}

        draggable

        onDragStart={e => {

          setBeingDragged(true);

          e.dataTransfer.setData(arrow, boxId);

        }}

        onDrag={e => {

          setPosition({}); // <---- just to force re-rendering, to draw arrow with updated value

          ref1.current.style.position = fixed;

          ref1.current.style.left = e.clientX + px;

          ref1.current.style.top = e.clientY + px;

          ref1.current.style.transform = none;

          ref1.current.style.opacity = 0;

        }}

        ref={ref1}

        onDragEnd={e => {

          ref1.current.style.position = absolute;

          ref1.current.style.left = connectPointOffset[handler].left;

          ref1.current.style.top = connectPointOffset[handler].top;

          ref1.current.style.transform = connectPointOffset[handler].transform;

          ref1.current.style.opacity = 0.5;

          setBeingDragged(false);

        }}

      />

WORKING DEMO : ( this is just another way )

#SO-drag-anim-optimization />

EDIT :

WORKING DEMO : ( With draggable box also )