javascript - 使用jquery获取容器内文本框的位置

Question

我有一个 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

如果您需要输入相对于 #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);