jQuery Resizable : 每个元素的唯一 MinWidth

Question

我正在使用可拖动和可放置的 jQuery UI Resizable。删除元素后，我需要在调整大小时控制最小宽度（每个元素的大小不同）。

jsFiddle

要求

• 文本元素：最小宽度应为 100px
• 按钮元素：最小宽度应为 50px

在下面我可以控制所有元素的相同最小宽度，但没有不同。

尝试下面的代码没有成功:(

if (ui.draggable.hasClass('draggableInput text')) {
    $element.appendTo(this);
    $element.append(textElement);
    $(this).resizable({
        minWidth: 100,
    });
}
else if (ui.draggable.hasClass('draggableInput button')) {
    $element.appendTo(this);
    $element.append(buttonElement);
    $(this).resizable({
        minWidth: 50,
    });
}

Answer 1

考虑以下示例。

var $element = ui.helper.clone();
$element.resizable().draggable().selectable();
$element.appendTo(this);

if (ui.draggable.hasClass('draggableInput text')) {
  $element.append(textElement);
  $(this).resizable("option", "minWidth", 100);
} else if (ui.draggable.hasClass('draggableInput button')) {
  $element.append(buttonElement);
  $(this).resizable("option", "minWidth", 50);
}

在这里你可以看到你在初始化后设置选项的位置。查看更多：https://api.jqueryui.com/resizable/#option-minWidth