jQuery Resizable : Unique MinWidth for each element

Question

I am using jQuery UI Resizable with draggable and droppable. Once element is dropped, I need to control the min width (different sizes for each element) while resizing.

jsFiddle

Requirement

• Text element : Min width should be 100px
• Button element : Min width should be 50px

In below I am able to control same min-width for all the elements, but not differently.

Tried below code without success :(

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

Consider the following example.

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);
}

Here you can see where youset the option after it has been initialized. See More: https://api.jqueryui.com/resizable/#option-minWidth