当抓取网格节点周围的元素时 ReactJS 消失

Question

我正在尝试围绕我的网格移动这个 gree 节点，但是当我移动它时，第一行中的最后一个节点消失了。

这是我的代码：

const onDrop = (e) => {
        e.preventDefault();
        console.log(e.target.id)
        let data = e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById(data));
    }

    const onDragStart = (e) => {
        e.dataTransfer.setData("text", e.target.id);
    }

    const onDragOver = (e) => {
        e.dataTransfer.setData("text", e.target.id);
    }

    return (
        <div
            onDrop={(e) => (onDrop(e))}
            onDragOver={(e) => (onDragOver(e))}
        >
            <div
                id={`${row}-${col}`}
                className={`node ${classes}`}
                draggable={draggAble}
                onDragStart={(e) => {
                    if (draggAble) {
                        onDragStart(e)
                    } else {
                        e.preventDefault()
                    }
                }}
            />
        </div>
    )

整个 div 与此代码在另一个 div 中。

<div className="Grid" onDrop={(e) => (onDrop(e))} onDragOver={(e) => (onDragOver(e))}>

这是我的 fiddle 的 link 片段 https://jsfiddle.net/Efiqqe/2tjs4v3f/1/

每个代码都在不同的组件中

你有什么技巧可以让最后一个节点停止消失吗？

感谢您的回答，如果post不够清楚，我很抱歉。

Answer 1

您每次都移动 0-0 的子项，因此您必须将其添加到第一个框中。

const div = document.createElement('div');
div.id = 'temp-0-0';
div.className = 'node';
div.draggable = false;
if(!document.getElementById('temp-0-0')) {
    document.getElementById('node-0-0').appendChild(div);
}

JSFiddle：https://jsfiddle.net/gupay0rc/2/

当抓取网格节点周围的元素时 ReactJS 消失

ReactJS when grabbing element around grid nodes are disapearing

drag-and-drop

reactjs