Javascript jQuery的draggable的真正x和y坐标相对于它的容器和同级是什么？

我试图找到容器内图像相对于容器和彼此的正确位置，以便提供冲突检测，并做一些其他有用的事情。现在，请想象有一个HTML，如：

<div id="imagesContainer">
    <div id="image1" ><img src="image1.png" /></div>
    <div id="image2" ><img src="image2.png" /></div>
    <div id="image3" ><img src="image3.png" /></div>
</div>

与容器左上角相关的div的x和y坐标的真实值或正确值是什么，以及如何设置它们并获取它们以备将来使用从数据库保存/还原等？

我认为根据该位置，应该可以作为

$('your element').data('draggable').offset

在拖动回调中，您应该能够执行以下操作

$('your element').draggable({
    drag: function(event, ui) {
        //Here you have available ui.position.top and ui.position.left
    }
});

记住，位置使用相对于父元素的坐标和相对于页面的偏移量。当然，您可以通过添加或减去相对于页面的父坐标在两者之间切换

---

至于在数据库中保存和恢复位置，您可以使用jQuery的AJAX方法，这是一个完全不同的问题。

我在尝试完成jQuery UI演示后写了这个问题。我认为相对于自己的元素起始位置，.position和.offset返回值，所以当我开始从下往上移动一个图像时，顶部会变成负数，而它不应该是负数，因为它仍然在它的容器井中，$this.position返回初始坐标，所以你可以添加它们！我需要的是每个元素相对于其父元素和彼此的坐标。返回初始坐标时，它们始终为0,0，即使它们是在阻力原点处测量的。$this.position确实返回任何相对于其父坐标的坐标。这与draggable行为无关，请参见，然后您可以将其相加为$This.data'draggable.offset的结果，它测量从初始位置的位移。

$('your element').draggable({
    drag: function(event, ui) {
        //Here you have available ui.position.top and ui.position.left
    }
});