滚动到对话框末尾后无法拖动项目-react-dnd

2024-05-19 • 问答

当我从对话框中拖放时， react-dnd 库出现问题

当我拖动项目而不滚动到对话框的末尾时，一切正常，

但是当我滚动到对话框的末尾时，该项目不能被拖动

另一个奇怪的是，该问题在Firefox浏览器中不存在，仅在chrome中不存在

注意：我确实将console.log放在 beginDrag 和 endDrag 中，我发现endDrag是在开始

之后直接调用的

ScreenShot

我找到了解决方法：

在拖动开始后，有时无法对自定义拖动层进行dom操作（在chrome中）

像这样一个：

<div ref={this.badItemRef} className="badItem" style={{
                opacity: isDragging ? "0" : "1",height: isDragging ? 0 : '',}}>
</div>

我通过操作 beginDrag 函数中的项目的CSS并通过setTimeOut函数

包装了该操作，从而解决了该问题

像这样：

// hide after a timeout
        setTimeout(() => {
            currentItemRef.style.display = "none";
        },0)

现在一切都看起来不错！