jQuery UI可调整大小-操作方向 [英] jQuery UI resizable - direction of operation

问题描述

如何确定调整大小的方向?我尝试谷歌搜索，并在jquery ui上找到了票证，说票证是固定的.但是没有关于如何使用它的文档.

How can I determine the direction of resize operation? I tried googling that and found a ticket on jquery ui, that said it is fixed. But there is no doc on how to use it.

推荐答案

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

Not sure if you meant that you'd like to constrain the resize operation to a particular axis, or if you'd like to know what direction the resize actually occurred in.

RaYell的答案适用于想要离开的人.我将讨论后者.

RaYell's answer works if you wanted to former. I'll discuss the latter.

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

If you set up a resizable like this:

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

比方说，您想知道在用户释放鼠标键后 中调整大小发生的方向.让我们将一个函数绑定到调整大小停止事件:

Let's say you'd like to know what direction the resize occurred in after the user releases the mouse button. Let's bind a function to the resize stop event:

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.让我们构建一个与手柄之一相对应的字符串.

Using the passed ui object, we can determine the relative change in size by subtracting the new size from the old size. After that, you can use delta_x and delta_y however you wish. Let's build a string that corresponds to one of the handles.

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

请注意，如果您在元素的两侧都具有手柄，则仅返回其净方向，就不一定会返回实际上用于执行调整大小的手柄.

Note that this will not necessarily return which handle was actually used to perform the resize if you have handles on both sides of the element, only it's net direction.

这篇关于jQuery UI可调整大小-操作方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！