【问题标题】: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 中

注意: 我确实在beginDragendDrag中放了一个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)
    

    现在一切看起来都不错!

    【讨论】:

      猜你喜欢
      • 2020-07-12
      • 1970-01-01
      • 1970-01-01
      • 2022-09-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多