如何一次性创建可调整大小并调整其大小？（以编程方式开始调整大小）答案

【问题标题】：How do you create a resizable and resize it in one go? (programmatically starting the resize)如何一次性创建可调整大小并调整其大小？（以编程方式开始调整大小）
【发布时间】：2010-11-16 09:12:24
【问题描述】：

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

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

关于如何实现这种行为的任何想法？

【问题讨论】：

标签： jquery jquery-ui resize resizable

【解决方案1】：

将此添加到您的 CSS 上方您的#block1 选择器：

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

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

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

但 IE 不支持:not，我不确定它的降级程度。这就是为什么需要将第一个示例放在 #block1 选择器上方的原因。

【讨论】：

感谢您的回答。我想我的问题不是很清楚，我正在寻找的是一种即时创建新的可调整大小的 div 的方法。请参阅：jsfiddle.net/KUfTa 和我当前的解决方案（在将新的可调整大小的 div 拖入存在时按下 shift 键）

【解决方案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。

【讨论】：

感谢您的回答。我想我的问题不是很清楚，我正在寻找的是一种即时创建新的可调整大小的 div 的方法。
查看：jsfiddle.net/KUfTa 使用我当前的解决方案（在拖动新的可调整大小的 div 时按下 shift 键）
看起来不错，如果用户将鼠标从起点拖到左上角，最后要做的一件事就是移动和调整 div 的大小