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

Question

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

Answer 1

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

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

如果您设置如下所示的可调整大小：

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

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

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

Answer 3

我知道这是很久以前的问题，但给出的解决方案并不能解决我的问题。 我找到了一种方法来访问启动函数中的处理程序，并且它可以在 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”（向上还是向下），然后通过在开始函数中获取原始大小并使用像循环一样的调整大小函数来计算对象大小的变化继续计算它。 如果尺寸减小，则从南手柄开始，方向为向上；如果从北手柄开始，方向为向下；如果尺寸增大，则意味着方向从南手柄向下，或从北手柄向上。

为了确定是“n”还是“s”被拉动，我只是从上面抓取了 dir 并将返回的类名中除了最后一个字母之外的所有内容切片，因为该类类似于 ui-handle-s。

这实际上相当幽默，因为我最终没有使用其中的大部分内容，因为我将其更改为仅从底部调整大小。 因为我没有使用它，所以我希望其他人发现这有帮助。

Answer 4

我认为选项 handles 就是您所追求的：

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

其中字母代表地理方向：

• n - 北（上）
• s - 南（下）
• e - 东（右）
• w - 西（左）
• ne -东北（左上）
• se - 东南（左下）
• NW - 西北（左上）
• sw - 西南（左下）

使用您喜欢的上述任何子集。

您可以在此处找到该选项的文档

Answer 5

$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});

Answer 6

尝试以下代码：

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

使用 handles 属性在四个方向上调整 div 的大小。

在这里查看：

http://www.landcoder .com/4-dynamic-interactive-code-snippets-jquery-705#ressized

Answer 7

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

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

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