为什么我的坐标 (pageX/pageY) 在拖动结束时发生变化？

Question

我正在尝试实现 HTML5 可拖动，但我看到一些没有多大意义的东西。我有一个像这样的 React 组件：

class Draggable extends React.Component {
    _onDragEnd(e) {
        console.log(`end`, e.pageX)
    }
    _onDrag(e) {
        console.log(`drag`, e.pageX)
    }
    _onDragStart(e) {
        console.log(`start`, e.pageX)
    }
    return <div draggable={true}
                onDrag={this._onDrag.bind(this)}
                onDragEnd={this._onDragEnd.bind(this)}
                onDragStart={this._onDragStart.bind(this)}
    }
}

当我拖动它时，我看到以下输出：

start 276
drag 279
drag 280
drag 281
drag 282
drag 283
drag 285
drag 286
drag 287
drag 288
drag 289
end 2209

请注意，pageX拖动结束时的 比之前发生的事件的 几乎大pageX2k drag。因为我知道我没有在上一个drag事件和该dragEnd事件之间移动鼠标 2k，所以我很困惑为什么它dragEnd pageX会大得多。

使用过 HTML 5 拖放功能的人以前是否见过类似的情况，如果是的话，您知道如何修复它吗？我意识到我可以通过将 保存pageX在我的_onDrag处理程序中来解决这个问题，但我很好奇为什么dragEnd事件pageX如此不同。

编辑：我只是尝试使用clientXandscreenX而不是pageX. clientX在拖动结束时有同样奇怪的跳跃，但由于某种原因，screenX最后的screenX跳跃与上次拖动的跳跃相匹配。但是，我认为我不想使用screenX，因为据我了解，如果我使用screenX并且用户拖动足够多以使页面滚动，则将screenX不准确。

Answer 1

不幸的是，这个问题已经太老了，但也许我仍然可以帮助其中之一。坐标显然是通过可拖动元素确定的。

大概ghostElement.getBoundingClientRect()。

在 Chrome 客户端中，onDrag 跳转到 0，在 Safari 中，它的行为有点不同。有趣的是，在 Chrome 中 onDragEnd 再次正确，但在 Safari 中 onDrag 上的错误不存在，但 onDrag 是错误的。

我实际上是在 React onDrag 处理程序之上使用它作为防护：

 if (event.clientY === 0) return

拖动后我根据我对onDrag的学习计算信息，因为safari在这里会出现问题。