如何知道在jquery resizable中使用哪个句柄

我正在使用jquery resizable来调整div的大小

$("#mainDiv").resizable({ handles: 's, e', start: function(event, ui) { // want to perform some action here }, resize: function(event, ui) { // want to perform some action here } }); 

现在我想根据事实来做一些事情，无论s或e是否被选中resize基本上resize是垂直或水平如何做到这一点

谢谢

Answer 1

轴在ui-resizable元素下放置为数据，如下所示：

$(element).data('ui-resizable').axis

Answer 2

 // the following will return direction as "n", "e", "s", "se" etc. $("#selector").resizable({ resize: function(e, ui) { // for jquery-ui 1.9.2 var direction = $(this).data('resizable').axis; // for jquery-ui 1.11.4 var direction = $(this).data('ui-resizable').axis; } }); 

Answer 3

你能为stop事件实现一个函数，然后使用ui.originalSize和ui.size检查元素是否已经水平或垂直resize，如：

  stop: function(event, ui) { if (ui.originalSize.width !== ui.size.width) { //element has been resized horizontally } if (ui.originalSize.height !== ui.size.height) { //element has been resized vertically } } 

Answer 4

做了改变

 ui: function() { return { originalElement: this.originalElement, element: this.element, helper: this.helper, position: this.position, size: this.size, originalSize: this.originalSize, originalPosition: this.originalPosition, }; } 

至

 ui: function() { return { originalElement: this.originalElement, element: this.element, helper: this.helper, position: this.position, size: this.size, originalSize: this.originalSize, originalPosition: this.originalPosition, handle : this.axis }; } 

ui.handle返回我的句柄名称:)

Answer 5

我使用以下方法： https ： //stackoverflow.com/a/13832254/1896534

  var handleTarget; //set scope $('#resize-this').resizable({ handles: 'n,e,s,w', start: function(ui,event){ handleTarget = $(event.originalEvent.target); }, resize: function(ui,event){ if (handleTarget.hasClass('ui-resizable-s'){ //do stuff } } )}; 

Answer 6

只是为了扩展@ user3322509的答案：

 $("#selector").resizable({ resize: function(e,ui) { console.log( ui.element.data("ui-resizable").axis ) } });