Element.offsetTop 意外增加

Question

尽管我已经找到了答案，但我正在创建这个问题供其他人查看他们是否有同样的问题。

我正在创建一个网页作为我在另一个项目中使用的工具；它的目标是让我能够操作覆盖图像的文本并显示文本的信息，例如其顶部和左侧属性。

我在实现W3 的使元素可拖动的方法时遇到了一个问题。拖动元素时，它的 left 值会按预期更改，但每次调用 时，top 值都会增加 16 elementDrag(e)，特别是每次使用elmnt.style.top = (elmnt.offsetTop - pos2) + "px";. 我尝试了很多方法，并认为我快要疯了，直到我在此页面上找到了简单的解决方案。问题的原因是被拖动的元素的边距为 16px，因此elmnt.offsetTop总是比 多 16px elmnt.style.top。

如果您想亲自查看我的问题，请参阅以下页面。它仍然是一个 WIP，而且我是一个新手，所以它还不是很完善。

1. 在“在此处输入”左侧的输入字段中输入一些文本

2. 按 Enter 或单击“提交”按钮

3. 单击放置在缺失图像上的文本

4. 然后按照您通常的预期单击并拖动。

5. 如果您想重现该问题，请margin: 0px;从 CSS 中删除“.overlayText”。

Answer 1

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