如何改變可調整大小的元素的手柄動態與jQuery UI的

Question

我有一個自定義的一個可調整大小的長方形格從EST，西兩側這樣的處理：

$("div.rect").resizable({ 

    handles: { 

      'e': '#egrip' 

      'w': '#wgrip' 

     } 

    // .... 
    // .... 
}) 

，我有這應該更改按鈕從東部和西部到北部和南部。

所以當我點擊按鈕時，'e，w'手柄應該消失，應該出現從'n，s'的手柄，Div將只能從北部和南部方向調整大小。

我該怎麼做？

Answer 1

正如評論：

手柄實際使用DOM發生變化，其中，當小部件被初始化只完成。我不認爲他們可以動態改變，你需要調用destroy然後重新創建控件

所以，你必須有這樣的：

$("div.rect").resizable({ 
    handles: { 
      'e': '#egrip' 
      'w': '#wgrip' 
     } 
    // .... 
    // .... 
}); 

然後，當你想改變可調整大小的手柄從e w到n s：

$("div.rect").resizable("destroy"); 
$("div.rect").resizable({ 
    handles: { 
      'n': '#ngrip' 
      's': '#sgrip' 
     } 
    // .... 
    // .... 
}); 

請記住，destroy調用也將刪除從DOM中現有的手柄（包括潛在的，#ngrip和#sgrip如果它們具有可調整大小的句柄類）。您可能需要動態地保存副本，如果你要回收他們後來

下面是說明實際使用DOM改變了這種https://jsfiddle.net/rmzwodj9/