如何在图像中获得div X和Y（左上角和右上角）

Question

以下是我正在尝试做的事情。

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

这里我在网站上添加了代码。 laughter.free.bg/imagemapping/Img1.html您需要做的是点击其中一个零食包的左上角和右下角。然后你会在右边看到一个带有绿色边界div坐标的方框。当我拖动或调整此div时，我希望这些坐标发生变化。您可以在页面源中看到代码。

提前多多感谢。

Answer 1

可以通过jQuery将函数绑定到resize事件。 例如，你的kiroid有一类ui可调整大小。你可以使用类似的东西：

$('.ui-resizable').resize(function() {
    // refresh your coords here from $('kiroid').css maby?
})