CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-plugins
Ilya Karnaukhov
Ilya Karnaukhov

Reputation: 3975

Jquery resizable plugin, set minWidth depending on the dragging edge

So I have an image, around it is a crop marker, I don't want to be able to resize the crop marker smaller than the image.

To do that I will need to set the minWidth of the crop marker which is depending on from which side the user is resizing (there is a handle everywhere: n, ne, e, se etc.)

My question is: how do achieve this? (I included an image to make my question a bit more clear)

Also, here is a jsfiddle that demonstrates the problem.

enter image description here

Upvotes: 2

Views: 1942

Answers (1)

Ryan Lynch
Ryan Lynch

Reputation: 7776

It looks like you posted this question twice. Here is my answer from the other question: Kind of a weird interaction, but here it is (jsfiddle)

$(function() {
    $( "#resizable" ).resizable({
        handles : 'e, n, s, w',
        resize : function(event, ui){
            switch($(this).data('resizable').axis)
            {
                case 'n':
                    $(this).resizable( "option", "minHeight", 75 );
                    break;
                case 's':
                    $(this).resizable( "option", "minHeight", 100 );
                    break;
                case 'e':
                    $(this).resizable( "option", "minWidth", 150 );
                    break;
                case 'w':
                    $(this).resizable( "option", "minWidth", 200 );
                    break;
            }
        }
    });
});​

Upvotes: 1

Related Questions