jQuery 的可拖动对象的真实 x 和 y 坐标对应于它的容器和兄弟姐妹是什么？

Question

我试图找到容器内图像相对于容器和彼此的正确位置，以便提供碰撞检测并做一些其他有用的事情。现在，不要想象有这样的 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>

还有一些关于文档的 JavaScript 代码已准备就绪：

 var positions = {}; // should already contain some x,y pairs of other dragged imagges

 $('#imagesContainer div').draggable({
            cursor: 'crosshair',
            drag: function(event){
                var id = // get the draggable's id
                positions[id].x = //find the x of the draggable
                positions[id].y = //find the y of the draggable
                // do calculations on the positions
            } // drag:
        });

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

Answer 1

我认为（根据this page）该职位应该可以作为

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

在drag 回调中你应该可以做到

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

请记住，position 使用相对于父元素的坐标，offset 使用相对于页面的坐标。当然你可以通过加减父坐标（相对于页面）在两者之间进行切换。

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