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

Question

如何确定resize操作的方向？我尝试谷歌搜索并在 jquery ui 上找到了一张票，上面说它已修复。但没有关于如何使用它的文档。

Answer 1

不确定您是否想将调整大小操作限制到特定轴，或者您是否想知道调整大小实际发生的方向。

如果你想前者，RaYell 的答案是有效的。我将讨论后者。

如果您设置了这样的可调整大小:

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

假设您想知道用户释放鼠标按钮后调整大小的方向。让我们将一个函数绑定(bind)到调整大小停止事件:

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

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