मैं 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/