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

如果你想要前任,Rayell的答案可以工作.我会讨论后者.

如果你设置了这样的可调整大小：

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',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);        
});

请注意,如果您在元素的两边都有句柄,那么它不一定会返回哪个句柄实际用于执行调整大小,只是它的净方向.