jQuery UI調整自定義句柄的大小，而不是調整元素的子元素

我需要爲不是此元素的子元素的jQuery UI可調整大小的元素定製句柄。我試圖以jQuery UI documentation page的方式記錄它，但我無法得到這個工作，併爲什麼用完了想法。jQuery UI調整自定義句柄的大小，而不是調整元素的子元素

這是我的設置示例（不工作）：

HTML

<div id="wrapper"> 
    <div id="resize-me"></div> 
</div> 

<div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div> 
<div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div>

$('#resize-me').resizable({ 
    handles: { 
    n: $('#n-resize-handle'), 
    e: $('#e-resize-handle'), 
    s: $('#s-resize-handle'), 
    w: $('#w-resize-handle'), 
    ne: $('#ne-resize-handle'), 
    se: $('#se-resize-handle'), 
    sw: $('#sw-resize-handle'), 
    nw: $('#nw-resize-handle') 
    } 
});

我準備這個問題的演示上codepen.io

我在網上搜索瞭如何實現類似的例子。也許這裏有人已經這樣做了，可以指出我錯過了什麼？

我已經看到this SO question但我認爲這不是重複的，因爲答案的作者指出，對於生產代碼來說，答案是不可行的。

任何幫助將不勝感激。

來源

2013-08-06 Arek

將所有處理程序移動到包裝中。他們在那裏，但他們是絕對定位的，所以你看不到他們。也給他們的高度或寬度和一些邊框顏色或背景等。像http://codepen.io/aamirafridi/pen/zKInJ –

Humm根據http://esbueno.noahstokes.com/post/426818005/jquery- ui-resizable-custom-handle-syntax您的處理程序需要位於可調整大小的元素內。像這樣http://codepen.io/aamirafridi/pen/zKInJ –

我知道如何讓他們在包裝內工作。我明確需要他們超越它。無論如何感謝您的建議。 – Arek

不是您希望的答案，但是 - 這是jQuery UI的一個開放（未解決）的錯誤。 http://bugs.jqueryui.com/ticket/9658

更新：此錯誤是固定在jQueryUI的1.11.4，其於3月2015年

來源

2014-06-13 04:54:12

不幸的是，我認爲這是這個問題的答案。我會將其標記爲任何正在查找有關此問題的信息的人都可以接受。謝謝！ – Arek

釋放你可以試試這個解決方法。我插入div divs在div大小 - 我。

HTML

<div id="wrapper"> 
    <div id="resize-me"></div> 
</div> 
<div id="divHandles"> 
    <div class="ui-resizable-handle ui-resizable-n" id="n-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-e" id="e-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-s" id="s-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-w" id="w-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-ne" id="ne-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-se" id="se-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-sw" id="sw-resize-handle"></div> 
    <div class="ui-resizable-handle ui-resizable-nw" id="nw-resize-handle"></div> 
</div>

JS $（文件）。就緒（函數（）{ appliResize（「＃調整大小我」）; }）;

function appliResize(elementName){ 
     $.each($("#divHandles").find(".ui-resizable-handle"), function (index, value){ 
      $(elementName).append($(value).clone().attr('id',$(value).attr('id')+elementName.slice(1))); 
    }); 
    $('#resize-me').resizable({ 
     handles: { 
      n: '#n-resize-handle'+elementName.slice(1), 
      e: '#e-resize-handle'+elementName.slice(1), 
      s: '#s-resize-handle'+elementName.slice(1), 
      w: '#w-resize-handle'+elementName.slice(1), 
      ne: '#ne-resize-handle'+elementName.slice(1), 
      se: '#se-resize-handle'+elementName.slice(1), 
      sw: '#sw-resize-handle'+elementName.slice(1), 
      nw: '#nw-resize-handle'+elementName.slice(1) 
     } 
    }); 
}

來源

2014-06-17 14:42:11

jQuery UI調整自定義句柄的大小，而不是調整元素的子元素

回答

相關問題