CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-resizable
Reddy
Reddy

Reputation: 1497

jQuery Resizable : Unique MinWidth for each element

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

enter image description here

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

Upvotes: 0

Views: 143

Answers (1)

Twisty
Twisty

Reputation: 30883

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

Upvotes: 1

Related Questions