(11) simulate ext's resizer and drag windows.

The Resize and drag interfaces of ext are very beautiful. Many friends want to use it in their own places, but do not want to use the entire Ext. Therefore, this article is particularly about the two effects. Let's take a look at the effect:

1. correct some ideas.

Many friends may think that the dotted lines and transparent windows during dragging are for good appearance, but they are more for efficiency. If there are many elements in the window, changing the size will lead to frequent re-layout of the internal elements, and the effect may become unusable.

2. Review the above drag.

The previous section describes how to implement drag.CodeImplement dragging:

ELEM. On ('dragstart', function (){});

3. resizer node.

The dotted box seen during Resize is actually a div that is not close to the window. We call this Div A proxy layer. (Div-proxy)

When the mouse clicks the corner, the proxy is displayed and attached to the window. When the mouse moves, the proxy size is changed. -When you move the mouse away, hide the code and set the window size.

4. Drag the handle.

The so-called handle is eight small things that can trigger resize. These things can be implemented using <div>:

<Div class = "X-resizable-lt"> </div> <Div class = "X-resizable-T"> </div> <Div class = "X-resizable -RT "> </div> <Div class =" X-resizable-L "> </div> <Div class =" X-resizable-R "> </div> <Div class = "X-resizable-lb"> </div> <Div class = "X-resizable-B"> </div> <Div class = "X-resizable -Rb "> </div>
 

Each slider:

. X-resizable-lt ,. x-resizable-T ,. x-resizable-RT ,. x-resizable-L ,. x-resizable-R ,. x-resizable-LB ,. x-resizable-B ,. x-resizable-Rb {overflow: hidden; width: 6px; Height: 6px; position: absolute ;}. x-resizable-lt {top: 0; left: 0; Z-index: 2; cursor: NW-resize ;}. x-resizable-t {width: 100%; top: 0; left: 0; Z-index: 1; cursor: N-resize ;}. x-resizable-RT {top: 0; Right: 0; cursor: NE-resize ;}. x-resizable-l {left: 0; cursor: W-resize ;}. x-resizable-r {right: 0; cursor: E-resize ;}. x-resizable-lb {bottom: 0; left: 0; Z-index: 2; cursor: Sw-resize ;}. x-resizable-B {width: 100%; bottom: 0; left: 0; cursor: S-resize ;}. x-resizable-Rb {bottom: 0; Right: 0; cursor: Se-resize ;}
 

In this way, you can see these handles.

The principle is not much discussed, so you can see the code.

5. Bind events-start dragging

Take the right slider as an example,

Document. queryone ('. x-resizable-R '). on ('dragstart', function (e) {showproxy (); // display proxy} document. queryone ('. x-resizable-R '). on ('dragmove ', function (e) {resize (); // change the agent size}); document. queryone ('. x-resizable-R '). on ('dragend', function (e) {hideproxy (); // display proxy });
 

 
Function showproxy () {$ ('proxy '). show (); // display proxy $ ('proxy '). setbound ($ ('elem '). getbound (); // change the position and size (for specific implementation, see series (V)} function resize (e) {resizeel (E, $ ('proxy '); // modify the size according to E .} Function hideproxy (e) {$ ('proxy '). hide (); // display proxy resizeel (E, $ ('elem ');} function resizeel (E, TG) {// modify the size according to E. TG. resizeBy (E. delta); If ({'x-resizable-l': 1, 'x-resizable-t': 1100000000e.tar get. classname]) {// if it is in the upper left direction, you must move the offset at the same time. TG. moveBy (E. Delta. Plus (-1); // The moving direction and size change are the opposite. }}
 

6. The above is the implementation of left-top-bottom-right, how to deal with the corner (in the lower right corner ).

In fact, xuanjicang has been hidden in it. When you press the slider in the lower right corner, you actually press the right slider and the lower slider. Therefore, convert the slider event in the lower right corner to the right slider, and combine the lower slider (simultaneously)

This method is not used by Ext. It has the advantage of saving code.

Therefore, the above Code has implemented events in every corner.

The last detail is as follows:

When the mouse is dragging, you want to keep the arrow direction, but in addition to Some browsers, other browsers will update the mouse style with the text.

The simplest way is to set document. Body. setstyle ('cursor ', 'resizer-x ')

However, chrome still changes the mouse according to select.

EXT adopts layer-based processing, that is, the drag of the global layer (transparent, global) is triggered on the layer, which is compatible with any browser.

Resize is always troublesome. Be careful when doing this. Otherwise there will be various problems.