（十一）模仿Ext的 Resizer 和 Drag 的窗口。

Ext的 Resize 和 Drag 界面非常漂亮，很多朋友想把它用到自己的地方，却不想用整个Ext ，所以本文特别对这2个效果进行制作。让我们先看下效果：

1. 修正一些认识。

     很多朋友肯能认为拖动时的虚线和透明窗口是为了美观，但其实它们更为了效率。如果窗口里有很多元素，如果经常改变大小，会导致内部元素经常重新布局，最后导致效果卡得不能用。

2. 复习上文的拖动。

    上文介绍了如何实现拖动，最终我们可以通过如下代码实现拖动：

     elem.on('dragstart', function(){});

3. resizer 节点。

   resize时见到的虚框其实是一个和窗口没关的div，我们把这个div称为代理层。 （div-proxy）

当鼠标按下角落时 - 显示代理，并附在窗口上 - 当鼠标移动， 改变代理大小。 - 当鼠标放开 - 隐藏代码， 设置窗口大小。

4. 拖动句柄。

   所谓的句柄就是八个可触发resize的小东西，这些东西可用<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>

每个滑块：

.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;
} 

这样，便可见到这些句柄。

原理不多说了，看代码就知道。

5. 绑定事件-开始拖动

以右滑块例，

document.queryOne('.x-resizable-r').on('dragstart', function(e){

  showProxy();  // 显示代理

}

document.queryOne('.x-resizable-r').on('dragmove', function(e){

 resize();  // 更改代理的大小

});

document.queryOne('.x-resizable-r').on('dragend', function(e){

 hideProxy();  // 显示代理

});

function showProxy(){
    $('proxy').show(); // 显示代理
    $('proxy').setBound(  $('elem').getBound() );  // 更改位置和大小 （具体实现见本系列（五））
}

function resize(e){   

   resizeEl(e, $('proxy');   // 根据e修改大小。
}


function hideProxy(e){
    $('proxy').hide(); // 显示代理

     resizeEl(e, $('elem'));  
   
}


function resizeEl(e, tg){     // 根据e修改大小。
   
    tg.resizeBy(  e.delta );   
  
    if({'x-resizable-l':1, 'x-resizable-t':1}[e.target.className]) {   // 如果是左上方向，需同时移动偏移位置。
       tg.moveBy( e.delta.plus(-1) );  // 移动的方向和大小改变的是相反。
    }
}

  6. 以上是对 left - top - bottom - right 实现，那角落如何处理（以右下角例）。

     其实在上面已经藏着玄机。 当鼠标按下右下角的滑块，其实也按了右滑块，下滑块。所以，把右下角的滑块事件转为右滑块，下滑块的结合（同时进行）

     这是 Ext未使用的方法， 有个优点，就是节约代码。

    所以上面的代码已经实现了每个角落的事件。

最后说个细节：

鼠标在拖到时，希望保持箭头方向，但除部分浏览器，其它浏览器会随文本更新鼠标样式。

最简单是方法为 设置 document.body.setStyle('cursor', 'resizer-x')

但这时 Chrome 仍然按因 select 更改鼠标 。

Ext 采用 layer 式处理， 即 在拖到前，全局加上 layer（透明，全局） 全部拖动都在 layer 上触发，这样兼容任何浏览器。

resize始终是麻烦的效果。做的时候需要仔细。否则会有各种问题。