Question

I have a div element which can be draggable and I have a textbox inside that div element and when I drag the div element automatically the textbox size should increase along with the div.And I need to get the textbox X and Y positions so how do I do that?

This is what I have now:

http://jsfiddle.net/wWFpP/3/

Here is my ode:

   <div class="demo">
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
        </div>

This is my script for dragging:

<script>
        $(function () {
            $('.demo')
        .draggable()
        .resizable();
        });

    </script>

Answer 1

A textarea should be specified in terms of rows and columns, according to the specs, but you can still style them with CSS:

#TextBox1
{
    width: 100%; height: 100%; /* make the element resize */
}
.demo
{
    width: 150px;
    height: 150px;
    padding: 5px 10px 20px 4px; /* updated padding to make things look better */
    background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

See here. Tested in Firefox, Chrome.

Also, if you need to get the X and Y coordinates, draggable has a stop method which you can bind to:

$('.demo')
    .draggable({ stop: function(event, ui) {
        //get the textarea element and it's coordinates
        var txt = $(this).find('textarea:first');
        var x = txt.offset().left;
        var y = txt.offset().top;
        alert('(' + x + ', ' + y +')');
    } })
    .resizable();