jQuery Resizable : 每个元素的唯一 MinWidth

Posted 2023-05-08

【中文标题】jQuery Resizable : 每个元素的唯一 MinWidth

【英文标题】：jQuery Resizable : Unique MinWidth for each element

【发布时间】：2021-07-10 04:12:30

【问题描述】：

我正在使用可拖动和可放置的 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,
    );

【问题讨论】：

您应该在if 语句中设置minWidth 选项。

【参考方案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

【讨论】：

@Twisty，感谢您的完美回答。我接受和UPVOTING你的真棒回答。非常感谢