为什么我的坐标(pageX/pageY)在拖动结束时改变

Why do my coordinates (pageX/pageY) change at end of drag?

本文关键字：拖动 结束 改变 pageY 坐标 我的 pageX 为什么      更新时间：2023-09-26

我试图实现一个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几乎比之前发生的drag事件的pageX大2k。因为我知道我没有在最后一个drag事件和dragEnd事件之间移动鼠标2k，所以我很困惑为什么dragEnd pageX如此大。

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

编辑:我只是尝试使用clientX和screenX而不是pageX。clientX在拖拽结束时有同样奇怪的跳跃，但由于某种原因，最后的screenX与最后一次拖拽的screenX匹配。然而，我不认为我想使用screenX，因为据我所知，如果我使用screenX和用户拖动足以使页面滚动的screenX将是不准确的。

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

可能是ghostElement.getBoundingClientRect() .

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

我实际上是在react onDrag处理程序之上使用这个作为保护:

 if (event.clientY === 0) return

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

相关文章：