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

我认为（根据 此页面）该位置应该作为

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

Inside the drag 提供您应该能够执行 回调

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

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

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