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.css 中。