10

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

4

7 回答 7

5

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

如果你想以前，雷耶尔的回答有效。我将讨论后者。

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

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

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

于 2009-07-16T20:38:30.287 回答
5

在开始、调整大小和停止回调中：

$(this).data('resizable').axis
于 2010-08-25T20:23:36.937 回答
4

我知道这是很久以前的一个问题，但是给定的解决方案并不能解决我的问题。我找到了一种在 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.

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

于 2014-02-17T21:08:12.260 回答
3

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

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

其中字母代表地理方向：

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

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

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

于 2009-07-16T20:13:17.357 回答
3 
$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});
于 2011-12-20T07:47:39.730 回答
1

试试这个代码：

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

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

在这里查看：

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

于 2017-01-30T01:51:18.553 回答
0

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

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

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

于 2014-06-25T13:14:20.857 回答