Jquery可调整大小的插件，根据拖动边缘设置minWidth [英] Jquery resizable plugin, set minWidth depending on the dragging edge

问题描述

所以我有一个图像，它周围是一个裁剪标记，我不希望能够调整比图​​像小的裁剪标记。

To要做到这一点，我需要设置裁剪标记的minWidth，这取决于用户调整大小的方向（到处都有句柄：n，ne，e，se等）。

我的问题是：怎么做到这一点？ （我添加了一张图片让我的问题更加清晰）

此外，这里有一个：有点奇怪的互动，但在这里（ jsfiddle ）

  $（function（）{
 $（＃resizable）。resizable（{
 handle： 'e，n，s，w'，
 resize：function（event，ui）{
 switch（$（this）.data（'resizable'）。axis）
 {
 case'n'：
 $（this）.resizable（option，minHeight，75）; 
 break; 
 case's'：
 $（这个）.resizable（option，minHeight，100）; 
 break; 
 case'e'：
 $（this）.resizable（option，minWidth， 150）; 
休息; 
 case'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可调整大小的插件，根据拖动边缘设置minWidth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！