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

我知道这是很久以前的一个问题，但是给定的解决方案并没有解决我的问题。我找到了一种方法来启动函数中的处理程序，它在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并切掉一切，但是返回了类名的最后一个字母，因为该类类似于{{ 1}}。

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

Answer 4

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

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

字母代表地理方向：

n - 北（上）
s - south（bottom）
e - east（右）
w - west（左）
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
    }
});

使用句柄属性将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();
    }
});

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

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

7 个答案: