如何使用 jquery 调整文本框大小并获取 div 元素内的尺寸

Question

我有一个可以拖动的 div 元素，并且该 div 元素内有一个文本框，当我自动拖动 div 元素时，文本框大小应随 div 一起增加。我需要获取文本框的 X 和 Y 位置，那么如何做我这样做？

这就是我现在所拥有的：

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

这是我的ode：

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

这是我的拖动脚本：

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

    </script>

Answer 1

根据规范，textarea 应按行和列指定，但您仍然可以使用 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;
}

请参阅 这里。在 Firefox、Chrome 中测试。

另外，如果您需要获取 X 和 Y 坐标，draggable 有一个可以绑定到的 stop 方法：

$('.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();

Answer 2

这就是你想要的吗？

http://jsfiddle.net/gmrcn/

编辑：
http://jsfiddle.net/gmrcn/2/

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