如何設置jquery ui的自定義調整大小手柄？

Question

我正在使用jquery ui來允許我的頁面元素可以調整大小，但我想設置自定義手柄。我試過了我認爲應該工作的東西，但事實並非如此。

基本HTML是：

<div id="element_x" class="resizable"> 
    <div id="overlay_x" class="element_buttons"> 
    <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div> 
    </div> 
</div> 

我把它像這樣：

var reposition = ''; 
    $(function() { 
    $(".resizable").resizable({ 
    containment: "#viewPage", 
    handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}}, 
    resize: function(event, ui){ 
     reposition = ui.position; 
    } 
    }); 
    }); 

這將產生正確的手柄在正確的地方，但是當我嘗試調整，它只是沒有按什麼都不做！任何人都可以看到有什麼不對，或建議更好的方法來做到這一點？

謝謝！

Answer 1

根據http://esbueno.noahstokes.com/post/426818005/jquery-ui-resizable-custom-handle-syntax，您的自定義句柄語法是錯誤的。這個工作對我來說：

var reposition = ''; 
    $(function() { 
    $(".resizable").resizable({ 
    containment: "#viewPage", 
    handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'}, 
    resize: function(event, ui){ 
     reposition = ui.position; 
    } 
    }); 
    }); 

Answer 2

The solution is not mine, but it shows exactly what the problem and the solution is:

<p><a href="http://bugs.jqueryui.com/ticket/4310">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p> 

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 


<div class="container"> 
    <div class="border bottom_right ui-resizable-se ui-resizable-handle"></div> 
</div> 

<script> 
    $(function() { 
     $('.container').resizable({ 
      handles: { se: '.bottom_right' } 
     }); 
    }); 
</script> 

對我來說，它的工作原理！ :)

http://jsfiddle.net/tj_vantoll/pFfKz/