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

Question

当我从对话框进行拖放操作时 react-dnd 库出现问题

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

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

另外奇怪的是火狐浏览器不存在这个问题，只有chrome

注意：我确实在 beginDrag 和 endDrag 中放了一个 console.log 我发现在 begin

之后直接调用了 endDrag

屏幕截图

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

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

现在一切看起来都很好！

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

can't drag item after scrolling to the end of dialog - react-dnd

javascript

reactjs

react-dnd