JQuery 根据 parent div 从 div 获得左侧和顶部位置

Question

我在另一个 div 中有一个可拖动的 divs，需要从 child div.

获取左侧和顶部位置

<div id="parent">
<div id="child1" style="position:absolute;"></div>
<div id="child1" style="position:absolute;"></div>
</div>

目前我根据第一个位置从 childs 获得位置：

$('#iframe_main').contents().find('.button".$key."').draggable({ 
    containment:'#parent',
    scroll: false,
    drag: function(event) {
        o = $('#iframe_main').contents().find('.child').offset();
        p = $('#iframe_main').contents().find('.child').position();

}});

因此，如果我将 child 放在 #parent 的右下角并将其移回左上角，我会得到负值。

我想要的是 child divs 的左上角位置，基于 #parent div.

Answer 1

您需要计算两个元素的位置。请看下面。

这是您可以制作的示例。

$('#iframe_main').contents().find('.button".$key."').draggable({ 
    containment:'#parent',
    scroll: false,
    drag: function(event) {
        o = $('#iframe_main').contents().find('.child').offset();
        p = $('#iframe_main').contents().find('#parent').offset();

        childtop = o.top - p.top;
        childleft = o.left - p.left;
        console.log(childtop + " " + childleft);

}});

JQuery 根据 parent div 从 div 获得左侧和顶部位置

JQuery get left and top positions from div based on parent div

jquery

position