Как изменить размер текстового поля и получить размеры внутри элемента div с помощью jquery - PullRequest
Новая
       13

Как изменить размер текстового поля и получить размеры внутри элемента div с помощью jquery

2 голосов
/ 26 октября 2011

У меня есть элемент div, который можно перетаскивать, и у меня есть текстовое поле внутри этого элемента div, и когда я перетаскиваю элемент div автоматически, размер текстового поля должен увеличиваться вместе с div. И мне нужно получить позиции X и Y в текстовом полетак как мне это сделать?

Это то, что у меня сейчас есть:

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

Вот моя ода: 

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

Этомой скрипт для перетаскивания: 

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

    </script>

Ответы [ 2 ]

3 голосов
/ 26 октября 2011

A 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();
1 голос
/ 26 октября 2011

Это то, что вы хотите?

http://jsfiddle.net/gmrcn/

Редактировать:
http://jsfiddle.net/gmrcn/2/

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