jQuery 可调整大小：每个元素的唯一最小宽度

Question

我正在使用 jQuery UI Resizable with draggable and droppable。删除元素后，我需要在调整大小时控制最小宽度（每个元素的大小不同）。

Requirement

文本元素：最小宽度应为 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

jQuery 可调整大小：每个元素的唯一最小宽度

jQuery Resizable : Unique MinWidth for each element

jquery

jquery-ui

jquery-ui-resizable