jQuery UI可调整大小-操作方向

如何确定调整大小操作的方向？我在谷歌上搜索了一下，在jQueryUI上找到了一张罚单，上面说它是固定的。但是没有关于如何使用它的文档。

我认为

处理

选项就是您想要的：

$(selector).resizable({handles: 'n, s, e, w'})

其中字母表示地理方向：

• 北-北（顶部）
• 南-南（底部）
• 东区(右)
• 西-西（左）
• 东北-东北（左上）
• 东南-东南（左下）
• 西北-西北（左上）
• 西南-西南（左下）

使用上面任意一个子集

---

您可以找到该选项的文档

不确定您的意思是要将调整大小操作约束到特定轴，还是想知道调整大小实际发生的方向

如果你想成为前者，雷尔的答案是有效的。我将讨论后者

如果按如下方式设置可调整大小的：

var r = $("#resizable");
r.resizable();

假设您想知道在用户释放鼠标按钮后，调整大小发生在哪个方向。让我们将一个函数绑定到resize stop事件：

r.bind('resizestop', function(event, ui) {
    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;
}

使用传递的ui对象，我们可以通过从旧大小中减去新大小来确定大小的相对变化。在这之后，您可以使用

delta_x

和

delta_y

按您的意愿。让我们构建一个与其中一个句柄对应的字符串

r.bind('resizestop', function(event, ui) {

    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;

    // build direction string
    var dir = '';

    if (delta_y > 0) { 
        dir += 's';
    } else if (delta_y < 0) { 
        dir += 'n';         
    }      

    if (delta_x > 0) { 
        dir += 'e';
    } else if (delta_x < 0) { 
        dir += 'w';
    }

    // do something with this string
    alert(dir);        
});

r.bind（'resizestop'，函数（事件，用户界面）{
//确定大小增量
var delta_x=ui.size.width-ui.originalSize.width；
var delta_y=ui.size.height-ui.originalSize.height；
//构建方向字符串
var dir=''；
如果（delta_y>0）{
dir+='s'；
}else如果（delta_y<0）{
dir+='n'；
}      
如果（delta_x>0）{
dir+='e'；
}else如果（delta_x<0）{
dir+='w'；
}
//用这根绳子做点什么
警报（dir）；
});

---

请注意，如果元素两侧都有句柄，则这不一定返回实际用于执行调整大小的句柄，只返回其净方向。

在开始、调整大小和停止回调中：

$(this).data('resizable').axis

---

我知道这是一个很久以前的问题，但给出的解决方案并不能解决我的问题。我找到了一种在start函数中访问处理程序的方法，它在FF和chrome中工作。我的组织不支持IE，因此它未经测试，但在这种情况下，FF方式应该可以工作，因为它是更标准的事件处理方式

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dir

是实际的处理程序，您必须从中找到类和方向（从类列表中解析，如果我到了那里，我会发布我所做的）

由于很多原因，在调整大小之前知道调整大小的方向是很有用的，我真的认为jQuery应该包括一种方法来知道哪个句柄被抓取了

稍后编辑： jQueryUI为他们的API提供了getter，在本例中，获取您只需执行的句柄列表

var handles = $( ".selector" ).resizable( "option", "handles" );

（这是直接从马嘴里说出来的）。在我的例子中，我只是检查它是'n'还是's'（向上还是向下），然后通过在start函数中获取原始大小并像循环一样使用resize函数来计算对象中的大小变化。如果尺寸减小，则从南把手向上，从北把手向下；如果尺寸增大，则表示从南把手向下或从北把手向上

为了弄清楚它是“n”还是“s”，我只是从上面抓起

dir

，并将返回的类名中除最后一个字母外的所有内容都切掉，因为该类类似于

ui-handle-s

---

它实际上相当幽默，因为我没有使用它的大部分，因为我把它改为只从底部调整大小。由于我没有使用它，我希望其他人会觉得这很有帮助。

jsonx有一个很好的解决方案，但您也可以利用内置事件：

$('#resizable').resizable({
    handles: 'n,s',
    start: function( event, ui ) {
        var handleDirection = event.srcElement.className.split("-").pop();
    }
});

代码使“#resizable”元素的大小可调，并在元素的南北两侧放置句柄。如果单击并拖动北手柄，则handleDirection为“n”。 我无法找到类似的方法来处理“停止”事件。

请尝试以下代码：

$( "#resizable" ).resizable({
    handles: "n, e, s, w",
    resize: function( event, ui ) {
       //your codes here
    }
});

通过使用handles属性，可以在四个方向上调整div的大小

在这里查看：

---

当我想在调整大小结束时确定更改时，此解决方案很酷。但问题是，我想知道调整大小开始时的方向。我知道这看起来很荒谬，因为我无法猜测用户是否会缩小或扩大尺寸。但我唯一需要知道的是，选择了哪一个hanlder——east还是west（在我的应用程序中只有这两个是可能的）。在这个答案的最后一句话中，如果例如移动了“west”句柄，这不会失败吗？在这种情况下，如果宽度减小-通过向东移动手柄-delta_x将小于零，因此报告的方向将为“w”。我还想知道在调整大小开始时单击了哪个手柄。请参阅我的答案否，OP不想定义可能的方向，但要确定实际选择的方向。这并没有解决最初的问题。我在这方面遇到了一件奇怪的事情。如果我单击调整大小句柄的边缘，返回的元素实际上就是存在于可调整大小元素外部的元素。但元素仍会调整大小。你有没有遇到过这种情况？我没有遇到过这样的问题，但是我正在调整的东西非常小，大约100像素宽，高度可变。因为我们最终没有使用这个，我只是发现了尺寸上的变化。如果只从一侧调整大小，这可能是一个选项。是的，我认为另一个div上的另一个jquery mousemove事件会中断原始的调整大小事件，这是一个问题

$( "#resizable" ).resizable({
    handles: "n, e, s, w",
    resize: function( event, ui ) {
       //your codes here
    }
});