使用jquery获取相对于图片的点击坐标

Using jquery to get click coordinates relative to picture

本文关键字：坐标 jquery 获取 相对于 使用      更新时间：2023-09-26

我正在尝试制作一个类似Facebook的照片标记系统，但使用目前的技术，我可以点击图像并获得坐标，但当我试图使输入框显示在这些坐标时，它会被偏移，因为img所在的div不在页面的右上角。我可以手动更改x和y的值以使其更准确，但如果我决定重新设计页面样式或移动div，数据库中所有标签的坐标都将偏离。Facebook是如何做到的？有没有办法保持坐标相对于包含的div？

这是我的东西。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function() {
    $("#photo").click(function(e) {
      var offset = $(this).offset();
      var x = (e.pageX + offset.left);
      var y = (e.pageY + offset.top);
      $("#tagger").css('top', y - 110); //manual offset
      $("#tagger").css('left', x-20); //manual offset
      $("#tagger").show().focus();
    });
  });
</script>

下面的div需要准备好放置在页面上的任何位置，并且仍然具有标记功能。

<div>
  <img id="photo" src="image.jpg" height="300" width="300">
  <input type="text" name="tagger" id="tagger">
</div>

谢谢你的帮助！

尝试使用.position而不是.offset。这将返回元素相对于其父容器的坐标。

相关文章：