Set different max/min- height, width on multiple elements with jqueryUI resizable - jquery-ui

Question

I am using jQuery-UI resizable on three elements, like this:
$("#element1, #element2, #element3").resizable();
All good and well.. BUT I need to set max/min- height, width. I can't see way in the documentation nor in the example to give the elements different (as in unique for each element selected) values on these:
maxHeight:
maxWidth:
minHeight:
minWidth:
That means that I will have to call the .resizable() one time for each element.... That doesn't feel optimal. Like this:
$("#element1").resizable({
maxHeight:
maxWidth:
minHeight:
minWidth:
});
$("#element2").resizable({
maxHeight:
maxWidth:
minHeight:
minWidth:
});
$("#element3").resizable({
maxHeight:
maxWidth:
minHeight:
minWidth:
});
What I would have liked is something like this:
$("#element1, #element2, #element3").resizable({
[
maxHeight: 111, //#element1
maxWidth: 111,
minHeight: 111,
minWidth: 111,
],
[
maxHeight: 222, //#element2
maxWidth: 222,
minHeight: 222,
minWidth: 222,
],
[
maxHeight: 333, //#element3
maxWidth: 333,
minHeight: 333,
minWidth: 333,
],
});
Is this somehow doable?

Answer 1

I believe you can achieve it this way inside of the resizable start event.
Give all of your resizable elements a common class.
You can use a switch statement, still quite a lot to write.
$('.widget').resizable({
start: function(event,ui) {
var hasId = ui.element.attr('id');
switch(hasId ){
case '#element1':
ui.element.resizable('option','maxHeight', 111);
ui.element.resizable('option','maxWidth', 111);
break;
case '#element2':
ui.element.resizable('option','maxHeight', 222);
ui.element.resizable('option','maxWidth', 222);
break;
case '#element3':
ui.element.resizable('option','maxHeight', 333);
ui.element.resizable('option','maxWidth', 333);
break;
}
}
});
Or, you could use data attributes to set the maxHeight and maxWidth like so:
$(function() {
$('.widget').resizable({
start: function(event,ui) {
var minH = $(this).attr('data-minH');
var maxH = $(this).attr('data-maxH');
var minW = $(this).attr('data-minW');
var maxW = $(this).attr('data-maxW');
$(this).resizable('option', 'minHeight', minH);
$(this).resizable('option', 'maxHeight', maxH);
$(this).resizable('option', 'minWidth', minW);
$(this).resizable('option', 'maxWidth', maxW);
}
});
});
.widget {
width: 100px;
height: 100px;
background: #333;
border: 1px solid #555;
position: relative;
display: inline-block;
}
.ui-resizable-se {
width: 20px;
height: 20px;
background: #555;
position: absolute;
bottom: 0;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="element1" class="widget" data-minH="100" data-maxH="100" data-minW="100" data-maxW="100"></div>
<div id="element2" class="widget" data-minH="100" data-maxH="200" data-minW="100" data-maxW="200"></div>
<div id="element3" class="widget" data-minH="100" data-maxH="300" data-minW="100" data-maxW="300"></div>