Как создать изменяемый размер и изменить его размер за один раз?(программно запускает изменение размера)

Question

Я пытаюсь создать изменяемый размер div в позиции мыши и немедленно изменить его размер до желаемого размера.Моя неудачная попытка на данный момент:

http://jsfiddle.net/YKnfR/1/

Есть идеи о том, как добиться такого поведения?

Answer 1

Вы просто должны добавить желаемый размер и ширину, используя heigth () и width ():

$(document).mousedown(function(e){
    var block = $('<div id="new">New</div>')

    $('#blocks').append(block)
    block.css('left', e.pageX).css('top', e.pageY).resizable()

    block.height('40');
    block.width('40');
})

Кроме того, вы можете поместить эти настройки прямо в CSS.

Answer 2

Добавьте это в ваш CSS выше ваш селектор # block1:

#blocks > div
{
    width: 200px;
    height: 200px;
}

Нет необходимости включать скрипт с изменяемым размером, пока вы не захотите, чтобы пользователь изменил его размер.Просто к вашему сведению, этот CSS был бы более понятен с помощью селектора :not, например:

#blocks > div:not(#block1)
{
    width: 200px;
    height: 200px;
}

, но IE не поддерживает :not, и я не уверен, насколько хорошо он ухудшается.Вот почему вам нужно поместить первый пример над селектором # block1.