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

Answer 3

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

要知道是 'n' 还是 's' 被拉出，我只是从上面抓住 dir 并切掉除了返回的类名的最后一个字母之外的所有内容，因为类类似于 ui-handle-s。

这实际上很幽默，因为我最终没有使用其中的大部分内容，因为我将其更改为仅从底部调整大小。由于我没有使用它，我希望其他人会觉得这很有帮助。

Answer 4

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

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

字母代表地理方向：

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

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

您可以找到该选项的文档here

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#resizable

Answer 7

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

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

代码使“#resizable”元素可调整大小，并在元素的南北两侧放置句柄。如果单击并拖动北手柄，则手柄方向为“n”。 我一直无法通过“停止”事件找到类似的方法。