jQuery UI可resize – 操作方向
如何确定resize操作的方向？ 我试着谷歌搜索，并在jquery ui上找到了一张票，表示它是固定的。 但是没有关于如何使用它的文档。
不确定您是否意味着要将resize操作约束到特定轴，或者您是否想知道实际resize的方向。
如果你想成为前者，RaYell的答案是有效的。 我将讨论后者。
如果你设置这样的可resize：
var r = $("#resizable"); r.resizable(); 假设您想知道用户释放鼠标按钮后resize的方向。 让我们将函数绑定到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); });
请注意，如果元素的两侧都有句柄，只有它的净方向，这不一定会返回实际用于执行resize的句柄。
在开始时，resize并停止回调：
$(this).data('resizable').axis
我知道这是很久以前的一个问题，但是给定的解决方案并没有解决我的问题。 我找到了一种方法来启动函数中的处理程序，它在FF和chrome中工作。 我的组织不支持IE，因此它未经测试，但在这种情况下FF方式应该可以工作，因为它是更标准的事件处理。
$(".resizable").resizable({ start: function (event, ui) { var dir = event.toElement ? event.toElement : event.originalEvent.target; } });
dir然后是实际的处理程序，你必须从那里找到类和方向（从类列表中解析，如果我到达那里我会发布我做的事情）。
在resize之前知道resize的方向很有用，原因很多，我真的认为jQuery应该包含一种方法来知道哪个句柄被抓取了。
稍后编辑：jQueryUI为他们的API提供getter，在这种情况下获取你刚刚做的句柄列表
var handles = $( ".selector" ).resizable( "option", "handles" );
（这是从马口直接）。 在我的情况下，我只是检查它是’n’还是’s’（向上或向下），然后通过在start函数中获取原始大小并使用resize函数像循环来计算对象中大小的变化继续计算它。 如果尺寸减小，则如果从南手柄向下方向上升，如果从北手柄向下则方向向上，如果增加则意味着方向从南手柄向下或从北手柄向上。
为了得到它是’n’还是’s’被拉，我只是从上面抓住dir并切掉一切，但是返回了类名的最后一个字母，因为类是ui-handle-s 。
它实际上相当幽默，因为我最终没有使用大部分内容，因为我将其更改为仅从底部resize。 由于我没有使用它，我希望其他人觉得这很有帮助。
我认为选项handles就是你所追求的：
$(selector).resizable({handles: 'n, s, e, w'})
字母代表地理方向：
- n – 北（上）
- s – 南（下）
- e – 东（右）
- w – 西（左）
- ne – 东北（左上）
- se – 东南（左下）
- nw – 西北（左上）
- 西南（左下）
使用您喜欢的上述任何子集。
您可以在此处找到该选项的文档
$(".ui-resizable-handle").live("mousedown", function(e) { $.ui.curResizeDirection = this.className.split("-").pop(); console.log($.ui.curResizeDirection); });
试试这段代码：
$( "#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
jsonx有一个很好的解决方案，但您也可以使用内置事件：
$('#resizable').resizable({ handles: 'n,s', start: function( event, ui ) { var handleDirection = event.srcElement.className.split("-").pop(); } });
该代码使’#resizable’元素可resize，并将句柄放在元素的北侧和南侧。 如果单击并拖动北句柄，则handleDirection为’n’。 我一直无法通过’stop’事件找到类似的方法。