反应拖放和连接箭头（或其他任何东西）与元素之间的动画

Question

经过几天的尝试没有成功，我再次来到这里，向各位专家致敬。

首先：现场演示！因为我们都喜欢现场演示。

Codesandbox

https://codesandbox.io/s/drag-with-not-animation-b3eh7?file=/src/App.js

我正在尝试在容器之间制作交互式可拖放箭头（意思是 - 有一个盒子的连接器，您可以将鼠标从一个容器拖动到另一个盒子，然后将在它们之间创建一个箭头).

实施 1：我可以在拖动时获得可拖动箭头的动画 - 但不会触发 onDrop 事件。
实现 2：在第二个实现中，我可以实现掉落效果，但不能实现动画。

从来没有他们两个！帮助！ ;<

代码里面有更详细的解释。

我已经尝试过的：

react-dnd - 也不起作用，因为它基于相同的 DOM 事件系统，本机浏览器拖放 API 基于（或者也许（可能）我做错了？）。

Answer 1

给你:

画Xarrow需要起点和终点

起点：将始终从
终点：你要放下的地方

这里有 2 个 refs ,

ref0 : 起始拖动点（即方框）
ref1 : 可拖动点（将是可拖动点）

这是需要更改的代码，请同时阅读注释，这将使流程清晰。

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>
    );
};

工作演示：

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 )

编辑：

工作演示：（也有可拖动框）

反应拖放和连接箭头（或其他任何东西）与元素之间的动画

react drag,drop, and connect arrow(or anything else) with animation between elements

javascript

animation

drag-and-drop

reactjs

Codesandbox