JQuery UI resizable usage considerations, real-time proportional stretching and tricks you don't know

This article summarizes the problems that I have encountered in the process of using the resizable plug-in, as well as the fantastic ideas for adapting to them.

　　First, resizable use precautions

Here are the tests I wrote on Jsfiddle DEMO:HTTP://JSFIDDLE.NET/PLUYMMP1

　　

1 <  class= "J_outer outer">2     <class  = "J_inner inner"></div>3</ Div >

HTML

1 . outer{width:100px;border:2px solid blue;} 2 . inner{width:50px;height:50px;border:2px solid green;margin:0 Auto;}

CSS

1$(". J_outer "). Resizable ({2Handles: "E"3 });4$(". J_inner "). Resizable ({5Handles: "E"6 });7 8$(". J_outer "). Resizable (" destroy ");//Unbind . J_outer's resizable9$(". J_outer "). Resizable ({TenHandles: "E" One }); A  -$(". J_inner "). Resizable (" destroy ");//Unbind . J_inner's resizable -$(". J_inner "). Resizable ({ theHandles: "E" -});

JS

The two-parent-child Div, which binds resizable and reconciles, is ordered, otherwise it can result in unexpected results.

1. Correct binding order: Bind the parent's resizable method first, then bind its children's resizable method

If it is, bind the child first, then bind the parent, and the test result is:

　　　　both the child and parent are bound to the action handle, but the parent Div's action handle does not respond to the drag event, and the child can .

　　　　

2. Unbind the parent resizable, and the resizable of the resulting child is also unbound

　　

3. Unbind the resizable of the child, and the parent's normal unaffected

　　

4. Resizable the child, then re-bind, the child and parent can respond to drag

5. Unbind the parent resizable, and then re-bind, the child and the parent can respond to the drag-and-drop

Therefore, the order of the bindings should be the parent-to-child, the resizable of the parent to be unbound, and the child must be re-bound resizable.

　　Second, the operating handle of the adaptation

The first thing to understand is that theresizable bound handle can have up to eight handles in eight directions, with only one in each direction.

That's the problem, if I want to have two handles in the s direction, what should I do?

I encountered this problem in the project, and finally I did it in a trickery way. The specific method is: Add one of the remaining seven directions, and then at Create, the unique handle class is replaced with ui-resizable-s, it is possible.

Demo Address: http://jsfiddle.net/q58chj0h/

　　

At that time to solve this problem, not to mention how happy, haha

　　

　　Third, the resizable existence of the bug

　　Jquery.ui.resizable Aspectratio cannot be reset after init

　　Workaround:

Fix code:

1 var oldsetoption = $.ui.resizable.prototype._setoption; 2 function (key, value) {3     oldsetoption.apply (this, arguments); 4     if (Key = = = "Aspectratio") {5         this. _aspectratio =!! value; 6     }7 };    

This allows for real-time switching and other proportional and non-proportional stretching, by the way, by pasting my equal-scale stretching implementation code:

　　

//used to identify whether resizing is scaled proportionally$SW. MouseOver (function() {$self. attr ("Aspectratio", "1");}); $se. MouseOver (function() {$self. attr ("Aspectratio", "1");}); $ne. MouseOver (function() {$self. attr ("Aspectratio", "1");}); $nw. MouseOver (function() {$self. attr ("Aspectratio", "1");}); $n. MouseOver (function() {$self. attr ("Aspectratio", "0");}); $e. MouseOver (function() {$self. attr ("Aspectratio", "0");}); $s. MouseOver (function() {$self. attr ("Aspectratio", "0");}); $w. MouseOver (function() {$self. attr ("Aspectratio", "0");});

1Startfunction(event,ui) {2 //determine whether to adjust proportionally3     if($( This). attr ("aspectratio") = = "1"){4$( This). Resizable ("option", "Aspectratio",true); 5}Else{6$( This). Resizable ("option", "Aspectratio",false); 7     }8}

　　

　　

　　

JQuery UI resizable usage considerations, real-time proportional stretching and tricks you don't know