jquery - サイズ変更可能なものを作成して一度にサイズ変更するにはどうすればよいですか? (プログラムでサイズ変更を開始)

Question

マウスの位置にサイズ変更可能な div を作成し、すぐに目的のサイズにサイズ変更しようとしています。これまでに失敗した試み：

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

この動作を達成する方法についてのアイデアはありますか?

Answer 1

これを#block1 セレクターの上の CSS に追加します。

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

ユーザーがサイズを変更するまで、サイズ変更可能なスクリプトを使用する必要はありません。参考までに、その CSS は次のような:notセレクターを使用するとより明確になります。

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

しかし IE は をサポートしていません:not。そのため、最初の例を #block1 セレクターの上に配置する必要があります。

Answer 2

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 に配置することもできます。