jquery resizable插件，根据拖动边设置minWidth

问题描述

所以我有一个图像，它周围是一个裁剪标记，我不希望能够将裁剪标记调整为小于图像的大小.

为此，我需要设置裁剪标记的 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模板网！