时间戳

首页 > 解决方案 > 抓取网格节点周围的元素时的ReactJS消失

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

问题描述

我试图在我的网格周围移动这个绿色节点，但是当我移动它时，第一行中的最后一个节点消失了。

这是我的代码：

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

这是我的小提琴片段的链接https://jsfiddle.net/Efiqqe/2tjs4v3f/1/

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

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

感谢您的回答，如果这篇文章不够清楚，我很抱歉。

标签： reactjsdrag-and-drop

解决方案

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/

推荐阅读