img内的div位置答案

【问题标题】：Div position inside imgimg内的div位置
【发布时间】：2013-04-02 12:35:51
【问题描述】：

这正是我想要做的。

我有一张图片，里面有方形元素。当我单击这些元素的左上角和右下角时，它们被带有边框的 div 包围。然后，我具有拖动和调整这些 div 大小的功能（一旦通过两次单击创建它们）。我希望能够在文本框中记录这些 div 调整大小的坐标。例如，如果图像的高度=700，宽度=500。然后，如果我在其中创建一个方形 div，坐标为左上角（x=190，y=150）和右下角（x=290，y=250）。然后，如果我在图像周围拖动这个 div，我希望这些坐标相应地改变。如果我调整它的大小，也会发生同样的事情。

非常感谢。

【问题讨论】：

代码更简洁
对不起，代码太长，不能写在这里，我不知道如何格式化它看起来像代码:(
想象一下我在#image 中有一个#div2。并且#div2 是可拖动的。所以我想根据#image的宽度和高度得到#div2的x和y坐标。
这里我在一个网站上添加了这个。 laughter.free.bg/imagemapping/Img1.html 你需要做的是点击其中一个零食包的左上角和右下角。然后你会在右边看到一个带有这个绿色边框 div 坐标的框。我希望在拖动或调整此 div 大小时更改这些坐标。可以在页面源码中看到代码
这有什么问题...？

标签： image html coordinates drag resizable

【解决方案1】：

var TopLeftX = $('.kiro'+CountClicks/2).offset().left - $('img').offset().left;
var TopLeftY = $('.kiro'+CountClicks/2).offset().top - $('img').offset().top;
var BottomRightX = TopLeftX + $('.kiro'+CountClicks/2).width();
var BottomRightY = TopLeftY + $('.kiro'+CountClicks/2).height();

【讨论】：

我想我们快到了。当我提醒 BottomRightX 和 BottomRightY 我得到 (NaN)。我已将“document.getElementById”替换为“$”。有什么建议？ :S
TopLeftX 和 TopLeftY 怎么样...？？
你的意思是所有都是NaN ...??
var TopLeftX = $('.kiro'+CountClicks/2).offsetLeft - $('img').offsetLeft; var TopLeftY = $('.kiro'+CountClicks/2).offsetTop - $('img').offsetTop; var BottomRightX = TopLeftX + $('.kiro'+CountClicks/2).offsetWidth; var BottomRightY = TopLeftY + $('.kiro'+CountClicks/2).offsetHeight;
现在全部整理好了。非常感谢您的时间。 var xDiff = $('img').offset().left - $('.kiro1').offset().left; var yDiff = $('img').offset().top - $('.kiro1').offset().top;