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

Question

如何確定調整大小操作的方向？我試着用google搜索並在jquery ui上找到了一張票，說它是固定的。但是沒有關於如何使用它的文檔。

Answer 1

不知道你的意思，你想限制調整操作到特定的軸，或者如果你想知道的大小調整實際上什麼方向的文檔發生在。

RaYell的答案，如果你想成爲前者。我會討論後者。

如果你設置了一個可調整大小是這樣的：

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

注意，這並不一定會返回的句柄實際使用，如果你對元件兩側手柄進行調整大小，只有它的淨方向。

Answer 2

我覺得選項handles是你所追求的：

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

凡字母代表的地理方向：

• N - 北（頂部）
• 秒 - 南（底部）
• e-east（右）
• w-west（左）
• NE - 東北（左上）
• SE - 東南（左下）
• NW - 西北（左上）
• SW - 西南（左下）

使用你喜歡的任何上述子集。

你可以找到該選項here

Answer 3

在開始，調整和停止回調：

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

Answer 4

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

Answer 5

我知道這是很久以前的一個問題，但所提供的解決方案並沒有解決我的問題。我找到了一種方法來到啓動函數中的處理程序，它在FF和chrome中工作。我的組織不支持IE，因此它沒有經過測試，但在這種情況下，FF方式應該起作用，因爲它是更標準的事件處理。

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

dir是那麼實際的處理程序，你必須找到這個類和方向（從類列表分析，如果我到那裏我會後我做什麼）。

由於很多原因瞭解調整大小之前發生調整大小的方向是很有用的，我真的認爲jQuery應該包含一種方法來知道哪個句柄已被抓取。

後來編輯： jQueryUI的干將提供爲他們的API，在這種情況下獲得的句柄列表，你會只是做

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

（這是直接從馬口）。在我的情況中，我只是檢查它是'n'還是's'（向上或向下），然後通過在啓動函數中獲取原始大小並使用resize函數（如循環）計算對象中大小的變化繼續計算它。如果尺寸減小的話，如果從南手柄向下並且如果從北手柄向下則方向向上，並且如果增大則意味着方向從南手柄向下或從北手柄向下。

爲了得到它是否是「n」或「S」被拉到，我只是從上面抓起dir和切片的一切，但最後一個字母關的類名返回，因爲類是像ui-handle-s。

這實際上很幽默，因爲我沒有最終使用這個大部分，因爲我改變它只是從底部調整。由於我沒有使用它，我希望別人認爲這有幫助。

Answer 6

的JSONx已經得到了很好的解決方案，但你還可以利用內置的事件：

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

的代碼使「#resizable」元素可調整大小，並把該元素的南北兩側把手。如果單擊並拖動北手柄，則handleDirection爲'n'。 我一直無法找到類似的方法來做到這一點與'停止'事件。

Answer 7

試試這個代碼：

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

股利在四個方向使用處理屬性調整大小。

看看這裏：

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