Question

I have a DIV container which position is absolute and I’m having a draggable DIV with a textbox inside that DIV and now I need the textbox X and Y position.

As I do not want the browsers position to be set and I need to set the DIV position (0,0)

Whenever I drag the draggable div in the main DIV container I need the texbox position as of now if I drag and drop I get the browsers X and Y position

This is what I mean?

Here is my code:

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

Here is my container:

   <div id="maincontainer">

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

These are my labels where I’m showing the positions:

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

Answer 1

If you need the input’s position relative to the #maincontainer div, you can do some simple math:

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);