为什么我的坐标（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比之前发生的pageX事件中的drag大了近2k。由于我知道我没有在最近的drag事件和dragEnd事件之间移动鼠标2k，因此我感到困惑的是为什么dragEnd {{1非常大。

有没有使用过HTML 5拖放的人之前看过这样的东西，如果有的话你知道怎么解决吗？我意识到我可以通过在pageX处理程序中保存pageX来解决问题，但我很想知道为什么_onDrag事件{{{ 1}}是如此不同。

编辑：我刚尝试使用dragEnd和pageX代替clientX。 screenX在拖动结束时具有相同的奇怪跳跃，但由于某种原因，末尾的pageX与最后一次拖动的clientX匹配。但是，我不想想我想使用screenX，因为据我理解，如果我使用screenX并且用户拖动足以让页面滚动screenX将不准确。