Search code examples
javascriptjqueryjquery-uijquery-ui-resizable

jquery ui resizable left-bottom handle to resize


I am using jquery-ui-resizable plugin in my project.

By default when you make a DOM Object jquery-ui-resizable the resizable handle will appear on right-bottom corner, I need the re-sizable handle on left-bottom corner.

--- EDIT ---

One more thing, it should not be re-sizable using right border but should be re-sizable using left border.

enter image description here


Solution

  • You should use the handles

    supported: { n, e, s, w, ne, se, sw, nw }. 
    

    This will create the Handles on the side you specified. Default values are

    'e, s, se'
    

    Code examples

    Initialize a resizable with the handles option specified.

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

    Get or set the handles option, after init.

    //getter
    var handles = $( ".selector" ).resizable( "option", "handles" );
    //setter
    $( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );