問題描述

所以我有一個圖像，它周圍是一個裁剪標記，我不希望能夠將裁剪標記調整為小于圖像的大小.

為此，我需要設置裁剪標記的 minWidth，這取決于用戶從哪一側調整大小(到處都有一個句柄:n、ne、e、se 等)

我的問題是:如何做到這一點?(我附上了一張圖片讓我的問題更清楚)

另外，這里有一個 :有點奇怪的交互，但在這里(jsfiddle)

$(function() {$( "#resizable" ).resizable({句柄:'e，n，s，w'，調整大小:函數(事件，用戶界面){switch($(this).data('resizable').axis){案例n":$(this).resizable("option", "minHeight", 75);休息;案例's':$(this).resizable("option", "minHeight", 100);休息;案例e":$(this).resizable("option", "minWidth", 150);休息;案例w":$(this).resizable("option", "minWidth", 200);休息;}}});});

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.

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

這篇關于jquery resizable插件，根據拖動邊設置minWidth的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！