如何创建可调整大小并一次调整大小？ （以编程方式启动调整大小）

Question

我正在尝试在鼠标位置创建一个可调整大小的div，并立即将其调整为所需的大小。 到目前为止我失败的尝试：

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

有关如何实现此行为的任何想法？

Answer 1

将此添加到CSS 上面＃block1选择器：

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

在您希望用户调整大小之前，无需获取可调整大小的脚本。仅供参考，使用:not选择器，CSS会更清晰：

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

但IE不支持:not，我不确定它的降级程度如何。这就是为什么你需要将第一个例子放在＃block1选择器上面。

Answer 2

您只需使用height（）和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。