javascript - 用元素之间的动画对拖放和连接箭头(或其他任何东西)使用react

Question

经过几天的尝试没有成功，我(再次..)来到这里，向你们所有的专家。

首先:现场演示!因为我们都喜欢现场演示。

代码沙盒

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

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

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

永远不要他们两个! 帮助! ;<

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

我已经尝试过的:

• react-dnd - 也不起作用，因为它基于与 native 浏览器拖放 API 相同的 DOM 事件系统(或者可能(并且可能)我做错了？)。

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 )

---

编辑:

工作演示:(也有可拖动框)