How to resize textbox and get dimensions inside div element using jquery

问题

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>

回答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();

回答2:

Is that what you want?

http://jsfiddle.net/gmrcn/

Edit:
http://jsfiddle.net/gmrcn/2/

#TextBox1 {
    width: 100%;
    height: 100%; /* edit: fixed @ comment */
}

来源：https://stackoverflow.com/questions/7907136/how-to-resize-textbox-and-get-dimensions-inside-div-element-using-jquery

标签

jquery

ASP.NET

html

resize

dimensions