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

Question

我如何确定调整大小操作的方向？我尝试通过谷歌搜索，在jquery ui上找到了一个说已经解决的票据。但是没有关于如何使用它的文档。

我该怎么判断调整大小的方向？我尝试在谷歌上搜索，发现了一个jQuery UI的问题解决记录，但是并没有说明如何使用。

- gruszczy

---

我还想知道在调整大小开始时点击了哪个句柄。 - Karl

请查看我的回答 https://dev59.com/GVrUa4cB1Zd3GeqPjm3Y#20833716 - Arsen K.

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

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

- sixthgear

---

这个解决方案很棒，当我想确定大小调整结束时的变化量时非常有用。但问题是，我想在调整大小开始时就知道方向。我知道这似乎很荒谬，因为我无法猜测用户会减小还是扩大尺寸。但我唯一需要知道的是，哪个手柄被选择了 - 东部还是西部（在我的应用程序中只有这两个可能）。 - gruszczy

根据这个答案的最后一句话，如果“west”手柄被移动，这不会失败吗？在这种情况下，如果通过向东移动手柄来减小宽度，则delta_x将小于零，因此报告的方向将是“w”。 - Bobby Jack

Answer 2

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

$(this).data('resizable').axis

- ste

Answer 3

我知道这是一个很久以前的问题，但是给出的解决方案不能解决我的问题。我发现了一种方法，在start函数中可以访问处理程序并且在FF和Chrome中可以正常工作。我的组织不支持IE，因此未经测试，但在这种情况下，FF的方法应该可以正常工作，因为它是更标准的事件处理方式。

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dir 是实际的处理程序，您需要从中找到类和方向（从类列表中解析，如果我到达那里，我会发布我所做的内容）。

在调整大小之前知道调整大小的方向对于许多原因都非常有用，我真的认为 jQuery 应该包含一种知道哪个手柄被抓取的方法。

稍后编辑： jQuery UI 为其 API 提供了 getter，在这种情况下，要获取手柄列表，只需执行以下操作：

var handles = $( ".selector" ).resizable( "option", "handles" );

（这是直接从消息来源处获取的）。在我的情况下，我只检查了它是“n”还是“s”（上或下），然后通过获取开始函数中的原始大小，并像循环一样使用调整大小函数来不断计算大小变化。如果尺寸减小，则方向从南侧把手向上，从北侧把手向下；如果尺寸增加，则意味着从南侧把手向下或从北侧把手向上。

为了确定是拉动“n”还是“s”，我只需要从上面获取dir并切掉返回的类名的最后一个字母以外的所有内容，因为类似于ui-handle-s这样的类名。

实际上，这相当有趣，因为我最终没有使用大部分内容，因为我将其更改为仅从底部调整大小。既然我没有使用它，希望其他人会发现这个有用。

- maggiekh

---

我在处理这个问题时遇到了一个奇怪的现象。如果我点击调整大小手柄的极端边缘，返回的元素实际上是可调整大小元素外部存在的元素。不过该元素仍然会被调整大小。你有遇到过这种情况吗？ - smurf

我没有遇到过这样的问题，但我正在调整的东西非常小，大约100像素宽，高度可变。由于我们最终没有使用它，所以我只是找到了尺寸上的变化。如果你只是从一侧进行调整大小，那可能是一个选项。 - maggiekh

是的，我认为这是另一个jQuery mousemove事件的问题，它正在干扰原始的resize事件。 - smurf

Answer 4

我认为选项handles是你需要的：

我认为选项handles是你需要的：

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

方向字母如下：

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

可以使用以上任意子集。

您可以在此处找到该选项的文档（链接）

- RaYell

---

不，OP并不想定义可能的方向，而是要确定实际选择了哪个方向。 - AGuyCalledGerald

这并没有解决原问题。 - SeanK

Answer 5

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

- jsonx

Answer 6

尝试一下这段代码：

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

元素可以使用handles属性在四个方向上调整大小。

在这里查看：

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

- zms

Answer 7

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

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

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

- omarjebari