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

【问题标题】：can't drag item after scrolling to the end of dialog - react-dnd滚动到对话框末尾后无法拖动项目-react-dnd
【发布时间】：2019-12-30 16:09:51
【问题描述】：

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

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

但是当我滚动到对话框的末尾时，无法拖动该项目

另外一件奇怪的事，这个问题在 Firefox 浏览器中不存在，只在 chrome 中

注意：我确实在beginDrag和endDrag中放了一个console.log，我发现endDrag是在begin之后直接调用的

截图

https://drive.google.com/file/d/1YX2Uxn66luARilVfJXucJgjBzhoaMAkU/view?usp=sharing

【问题讨论】：

标签： javascript reactjs react-dnd

【解决方案1】：

我找到了解决方案：

有时，自定义拖动层的 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)

现在一切看起来都不错！

【讨论】：