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

Question

如何确定调整大小操作的方向？我试着谷歌搜索,并在jquery ui上找到了一张票据,说是固定的.但是没有关于如何使用它的文档.

Answer 1

不确定您是否想要将调整大小操作约束到特定轴,或者您是否想知道实际调整大小的方向.

如果你想成为前者,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', 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);        
});

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

Answer 2

在开始时,调整大小并停止回调:

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