如何在jQuery拖拽stop事件中获取元素的绝对位置？

嘿，我来帮你搞定这个问题！你现在代码里用的$(this).parent().position()，拿到的其实是父元素相对于它自己定位父元素的偏移量，完全不是目标拖拽元素的绝对位置，这就是问题的根源啦。

要获取元素的绝对位置（相对于整个文档），直接用jQuery的offset()方法就可以，它会返回元素相对于文档左上角的坐标。修改你的拖拽停止事件处理函数就行：

$(".main_line").draggable({ 
    stop: function(event, ui) { 
        // 获取元素相对于文档的绝对位置
        var absolutePos = $(this).offset(); 
        console.log("绝对位置（文档坐标）：", absolutePos); 

        // 额外补充：如果需要相对于浏览器视口的位置，可用原生JS方法
        var viewportRect = this.getBoundingClientRect();
        console.log("相对于视口的位置：", viewportRect.top, viewportRect.left);
    } 
});

给你简单理清楚几个常用位置方法的区别，避免再踩坑：

• position()：返回元素相对于最近的已定位父元素的偏移量（相对位置）
• offset()：返回元素相对于整个文档的偏移量（绝对位置，这正是你需要的）
• getBoundingClientRect()：原生JS方法，返回元素相对于浏览器视口的位置，还包含宽高信息，页面滚动时这个值会随之变化

这样修改后，你就能在拖拽停止时精准拿到元素的绝对位置啦！

内容的提问来源于stack exchange，提问作者Tirkesh Turkesh