使用jquery获取容器内容器的位置

Question

我有一个DIV容器，其位置是绝对的，我在DIV中有一个带有文本框的可拖动DIV，现在我需要文本框X和Y位置。

因为我不想设置浏览器位置，我需要设置DIV位置（0,0）

每当我拖动主DIV容器中的可拖动div时，我需要texbox位置，如果我拖放我得到浏览器X和Y位置

这就是我的意思？

这是我的代码：

 <script type="text/javascript">
        $(function () {

            $('.innercontainer').draggable({
                containment: '#maincontainer',
                cursor: 'move',
                snap: '#content',
                stop: function () {
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                    $('#posX').text('X: ' + xPos);
                    $('#posY').text('Y: ' + yPos);
                }
            })
    .resizable();

        });

    </script>

这是我的容器：

   <div id="maincontainer">

    <div class="innercontainer">
                                <asp:TextBox ID="TextBox1" TextMode="MultiLine"></asp:TextBox>
</div>
</div>

这些是我正在展示职位的标签：

 <asp:Label ID="posX" runat="server" Width="80px">X:</asp:Label>
 <asp:Label ID="posY" runat="server" Width="80px">Y:</asp:Label>

Answer 1

尝试使用jQuery偏移量： -

jQuery(elem).offset();

请参阅 http://docs.jquery.com/CSS/offset 了解摘要

Answer 2

如果你需要输入相对于#maincontainer div的位置，你可以做一些简单的数学运算：

var containerPos = $('#maincontainer').offset();
var inputPos = $('.innercontainer input').offset();
relativeOffset = { 
    top: inputPos.top - containerPos.top,
    left: inputPos.left - containerPos.left };
$('#posX').text('X: ' + relativeOffset.left);
$('#posY').text('Y: ' + relativeOffset.top);