使用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

如果你需要的位置相对于输入的为#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); 

Answer 2

尝试使用jQuery的偏移： -

jQuery(elem).offset(); 

作一个总结见http://docs.jquery.com/CSS/offset