Element.offsetTop 意外增加

Question

尽管我已经找到了答案，但我正在创建这个问题供其他人查看他们是否有同样的问题。我正在创建一个网页作为我在另一个项目中使用的工具；它的目标是让我能够操作覆盖图像的文本并显示文本的信息，例如其顶部和左侧属性。我在实现W3 的使元素可拖动的方法时遇到了一个问题。拖动元素时，它的 left 值会按预期更改，但每次调用 时，top 值都会增加 16 elementDrag(e)，特别是每次使用elmnt.style.top = (elmnt.offsetTop - pos2) + "px";. 我尝试了很多方法，并认为我快要疯了，直到我在此页面上找到了简单的解决方案。问题的原因是被拖动的元素的边距为 16px，因此elmnt.offsetTop总是比 多 16px elmnt.style.top。如果您想亲自查看我的问题，请参阅以下页面。它仍然是一个 WIP，而且我是一个新手，所以它还不是很完善。在“在此处输入”左侧的输入字段中输入一些文本按 Enter 或单击“提交”按钮单击放置在缺失图像上的文本然后按照您通常的预期单击并拖动。如果您想重现该问题，请margin: 0px;从 CSS 中删除“.overlayText”。

Answer 1

默认情况下，被拖动的 <p> 元素的边距为 16px，因此elmnt.offsetTop始终比 多 16px elmnt.style.top。margin: 0px;通过添加到该类的 CSS可以解决此问题.overlayText。