Ext drag 那些事

//panel初始化拖拽函数
initDraggable : function() {
        if (this.simpleDrag) {// default value is 'false'
            this.initSimpleDraggable();
        }
    else {
           this.dd = new Ext.panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable);
}

在EXT有一个Ext-dd-DragDropManager类（理解浏览器的事件传播模型很重要）, 该类在初始化的第一件事就是在docment上注册
mousemove 如下：
Ext.define('Ext.dd.DragDropManager', {
    singleton: true,
。。。。。。。
}, function() {
this._addListeners();
})

_addListeners: function() {
        if ( document ) {
//初始化拖拽相关的事件（如下）
            this._onLoad();
        } else {
    //确保document.body已加载完毕
            if (this._timeoutCount <= 2000) {
                setTimeout(this._addListeners, 10);
                if (document && document.body) {
                    this._timeoutCount += 1;
                }
            }
        }
    },
_onLoad: function() {
this.init();
var Event = Ext.EventManager;
        Event.on(document, "mouseup",   this.handleMouseUp, this, true);
//当我们在document拖动鼠标时，会触发handleMouseMove函数，这里需要提醒的一点是： 在实际处理cmp的拖动
//事件时，是有限制的，例如拖动范围必须大于某个值（可佩的），才会触发， 具体的拖拽函数并不是实时执行的，而是利用
//setTimeOut(drageFn, 1000(可佩的))
        Event.on(document, "mousemove", this.handleMouseMove, this, true);
        Event.on(window,   "unload",    this._onUnload, this, true);
        Event.on(window,   "resize",    this._onResize, this, true);
        // Event.on(window,   "mouseout",    this._test);

    }

Ext-dd-DragDropManager是一个单例模式，负责处理所有cmp控件的拖拽，Ext-dd-DragDropManager中有一个属性dragCurrent是用来
记录当前的拖拽对象，当退拽事件发生时，会通过dragCurrent.onDrag等类似的方式，来传递所有的与拖拽相关的事件处理机制

//接下来我们来具体看一下Ext.panel.Panel的拖拽初始化（从Ext.panel.DD说起）
1. Ext.panel.DD.constructor
var me = this;
    me.panel = panel;
me.dragData = {panel: panel};
//下面这行代码的含义是： 建议打开ext文档的portal demo例子看一下，当拖拽时会出现两种现象,1.出现一个虚线框(样式
//是可以自定义的)，2.当前拖动的panel好像没有了item，只是一个panel的框架， 当我们松开鼠标时，panel又恢复了。
//所以我要说的这两种现象的处理都在new Ext.panel.Proxy实现的，第一种现象是proxy(虚线框)，第二种现象是ghost，panel的
//复制版本，他与当前的panel的关系是：
     *constructor: function(panel, config){
* var me = this;
* me.panel = panel;
* me.id = me.panel.id +'-ddproxy';
* Ext.apply(me, config);
*}
*当我们开始拖拽的时候，他会调用Ext.panel.Proxy.show方法， 看一下show方法的源码，我们就明白了
me.panelProxy = new Ext.panel.Proxy(panel, cfg);
me.proxy = me.panelProxy.proxy;
me.callParent([panel.el, cfg]);
//还记得当拖拽panel的时候，我们的鼠标会变成"move"形状， 在Ext当中，当我们把鼠标放在某个cmp上时，如果出现move形状，
//那么这个cmp叫做"handlerEl"， 知道这个东东，ok那我们就可以任意指定panel移动时的handlerEL了（扩展Ext.panel.DD），默认情况下是panel.header.el
//如果你的panel的header是false,那么此时的handler就是panel.body了, 没错，me.setupEl(panel)方法就是干这个事情（详细代码如下）
me.setupEl(panel);
2. Ext.panel.DD.setupEl
    setupEl: function(panel){
        var me = this,
            header = panel.header,
//默认是panel.body
            el = panel.body;
           
        if (header) {//如果有header,那就是header.el
            me.setHandleElId(header.id);
            el = header.el;
        }
        if (el) {
//惊呆了，原来如此
            el.setStyle('cursor', 'move');
            me.scroll = false;
        } else {
          panel.on('boxready', me.setupEl, me, {single: true});
        }
},
 
  //关于该构造函数参数是什么意思，看一下他的子类Ext.panel.DD：
     *  me.callParent([panel.el, cfg]);
*
*
3.Ext.dd.DragSource.constructor(Ext.panel.DD的父类)
//el就是当前panel的el，说白了就是当前panel的dom
    this.el = Ext.get(el);
//this.dragData， 该属性，在拖拽事件函数中可以拿到这个值
if(!this.dragData){
  this.dragData = {};
}
Ext.apply(this, config);
if(!this.proxy){
     //还记得上面提到proxy吗？ 他就是那个虚线框，其实默认就是this.proxy
this.proxy = new Ext.dd.StatusProxy({
  id: this.el.id + '-drag-status-proxy',
  //指定是否在Repair的时候添加me.el.animate特效（更加线性）
  animRepair: this.animRepair
});
}
//调用父类构造（在下面介绍）
this.callParent([this.el.dom, this.ddGroup || this.group,
{dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
//状态标识
this.dragging = false;

4.Ext.dd.DDProxy.constructor(Ext.dd.DragSource的父类)
     if (id) {
        //在父类Ext.dd.DragDrop（在下面介绍）
*在dd中group有何作用，我的理解是在同一group下的cmp target是支持互相drop的
*而这些group与cmp都是存储在Ext.dd.DragDropManager中的ids属性当中

}
    this.init(id, sGroup, config);
//见5.xxxxx.createFrame
            this.initFrame();

//在document.body的body.firstChild前面插入一个div元素
*  <div id="${panel.el.id}-drag-status-proxy" style="position:absolute; visibility: hidden; cursor:move; border: 2px solid #aaa; zIndex: 999">
*  </div>
*
5.Ext.dd.DDProxy.createFrame
       var self = this,
body = document.body,
div,
s;

if (!body || !body.firstChild) {
setTimeout( function() { self.createFrame(); }, 50 );
return;
}

//Ext.dd.DragDrop.getDragEl 其实就是获取proxy.dom
div = this.getDragEl();
                   
//div不为空，因为proxy是已经存在的
if (!div) {
div    = document.createElement("div");
//就是this.el.id + '-drag-status-proxy'（还记得这样代码吗？）
div.id = this.dragElId;
s  = div.style;

s.position   = "absolute";
s.visibility = "hidden";
s.cursor     = "move";
s.border     = "2px solid #aaa";
s.zIndex     = 999;
body.insertBefore(div, body.firstChild);
}

6.Ext.dd.DragDrop.init
        //从方法名称，我可以得出target这个术语，每次在Ext的DD机制当中，target是其组成的一个部分，那么他的作用是什么的
//加入 我想将一个panel移动到另一panel当中。 首先目标panel必须的是一个target，当拖拽事件over在目标target上时，
//此时target就可以接受当前的proxy，
* 这id就是panel.el.dom(它不是proxy.dom哦)
*
this.initTarget(id, sGroup, config);
//监控dom of this.id的 mousedown事件（见下面handleMouseDown）
Ext.EventManager.on(this.id, "mousedown", this.handleMouseDown, this);

6.Ext.dd.DragDrop.initTarget
    initTarget: function(id, sGroup, config) {
        // configuration attributes
        this.config = config || {};
//Ext.dd.DragDropManager这个东东，在开始的时候我有介绍它在EXT DD机制中所扮演的角色
        this.DDMInstance = Ext.dd.DragDropManager;
       this.groups = {};
if (typeof id !== "string") {
            id = Ext.id(id);
    }
this.id = id;
//还记得我之前说过的target吗？ 他在dd中扮演的角色，以及角色是如何被创建的， ok addToGroup就是做这件事情的
//最终所有的target都会存放在Ext.dd.DragDropManager（我是单例的哦）的属性当中
this.addToGroup((sGroup) ? sGroup : "default");
//还记得我之前介绍的handler吗？
this.handleElId = id;
//设置一个默认的DragElId
this.setDragElId(id);
this.invalidHandleTypes = { A: "A" };
        this.invalidHandleIds = {};
        this.invalidHandleClasses = [];
//这个方法是在
this.applyConfig();
this.handleOnAvailable();
    },
7.Ext.dd.DragDrop.applyConfig(Ext.dd.DDProxy已经复写)
applyConfig: function() {

        // configurable properties:
        //    padding, isTarget, maintainOffset, primaryButtonOnly
        this.padding           = this.config.padding || [0, 0, 0, 0]; //padding
        this.isTarget          = (this.config.isTarget !== false); // is target
        this.maintainOffset    = (this.config.maintainOffset); //null
        this.primaryButtonOnly = (this.config.primaryButtonOnly !== false); //true

}
8.Ext.dd.DDProxy.applyConfig
    this.callParent();
this.resizeFrame = (this.config.resizeFrame !== false); //false
this.centerFrame = (this.config.centerFrame); //false
this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId); //proxy.id

//该方法是panel drag事件的真正起始处理入口
9.Ext.dd.DragDrop.handleMouseDown
var me = this;
//可以通过指定primaryButtonOnly=true，来保证当鼠标点击icon button不会触发drag
if ((me.primaryButtonOnly && e.button != 0) || me.isLocked()) {
return;
}
//重置当前所有的dd对象的位置信息
me.DDMInstance.refreshCache(me.groups);
//me.DDMInstance.isOverTarget方法是判断当前鼠标的位置是否在 me 的之上（over）
if (me.hasOuterHandles || me.DDMInstance.isOverTarget(e.getPoint(), me))  {
if (me.clickValidator(e)) {
// set the initial element position
me.setStartPosition();
me.b4MouseDown(e);
me.onMouseDown(e);
//接下来就是将当前的me传给dragCurrent ，之后的mousemove事件就可以开始了
me.DDMInstance.handleMouseDown(e, me);
   me.DDMInstance.stopEvent(e);
}
}

10.Ext.dd.DragDropManager.handleMouseDown
handleMouseDown: function(e, oDD) {
        var me = this,
            el;

        if (Ext.quickTipsActive){
            Ext.tip.QuickTipManager.ddDisable();
        }
        if (me.dragCurrent){
            me.handleMouseUp(e);
        }

        me.currentTarget = e.getTarget();
        me.dragCurrent = oDD;// 就是他，接下来了我们看看dragCurrent是怎么被使用的

        el = oDD.getEl();
if (Ext.isIE9m && el.setCapture) {
            el.setCapture();
        }

        // track start position
        me.startX = e.getPageX();
        me.startY = e.getPageY();

        me.deltaX = me.startX - el.offsetLeft;
        me.deltaY = me.startY - el.offsetTop;

        me.dragThreshMet = false;

        me.clickTimeout = setTimeout(
            function() {
//clickTimeThresh（默认350毫秒之后，也就是说，当你按住鼠标350毫秒之后就会发生情况）毫秒之后会执行函数startDrag
//（见如下分析）
   me.startDrag(me.startX, me.startY);
            },
            me.clickTimeThresh
        );
    }
//---------------------------------------------接下来的分析就是鼠标down的时候所发生的事情------------------------------------------

//在这个方法里current 就是我们上一个方法注入的dragCurrent
11.Ext.dd.DragDropManager.startDrag
   startDrag: function(x, y) {
        var me = this,
            current = me.dragCurrent,
            dragEl;

        clearTimeout(me.clickTimeout);
        if (current) {
//就是Ext.panel.DD中的b4StartDrag方法（见如下分析）
            current.b4StartDrag(x, y);
//需要自己实现，默认情况下Ext.panel.DD为Ext.emptyFn
            current.startDrag(x, y);
//见14分析。获取克隆panel的EL
            dragEl = current.getDragEl();

            // Add current drag class to dragged element
            if (dragEl) {
//给克隆panel加上一些样式，该样式可以在Ext.panel.DD的属性中定义
                Ext.fly(dragEl).addCls(me.dragCls);
            }
        }
        me.dragThreshMet = true;
    },

12.Ext.panel.DD.b4StartDrag
//还记的那个proxy吗？在Ext.panel.DD的构造函数里有这么一行代码：
//me.panelProxy = new Ext.panel.Proxy(panel, cfg)
   b4StartDrag: function(x, y) {
//见如下代码分析
        this.panelProxy.show();
    }

13.Ext.panel.Proxy.show
   show: function(){
        var me = this,
            panelSize;
           
        if (!me.ghost) {
            panelSize = me.panel.getSize();
            me.panel.el.setVisibilityMode(Ext.Element.DISPLAY);
//显示一个克隆 panel
            me.ghost = me.panel.ghost();
            if (me.insertProxy) {
                //在me.panel.dom的before位置插入一个DIV，（默认情况下是一个虚线框）
me.proxy = me.panel.el.insertSibling({cls: Ext.baseCSSPrefix + 'panel-dd-spacer'});
                me.proxy.setSize(panelSize);
            }
        }
    }

14. Ext.panel.DD.getDragEl
//具体克隆panel的处理在Ext.panel.Panel.ghost()
getDragEl : function(e){
        var ghost = this.panelProxy.ghost;
        if (ghost) {
            return ghost.el.dom;
        }
    }

//---------------------------------------------接下来的分析就是鼠标move的时候所发生的事情------------------------------------------
//该方法是drag move事件的入口处理函数
15. Ext.dd.DragDropManager.handleMouseMove
    handleMouseMove: function(e) {
        var me = this,
            current = me.dragCurrent,
            diffX,
            diffY;

        if (!current) {
            return true;
        }
//dragThreshMet默认为false
        if (!me.dragThreshMet) {
            diffX = Math.abs(me.startX - e.getPageX());
            diffY = Math.abs(me.startY - e.getPageY());
//下面if处理，也是我开始说过的，不能过于频繁执行move事件处理，例如不能拖动一个像素也出发move事件，
//所以clickPixelThresh，clickPixelThresh两个属性就是用来设置这种限制的
            if (diffX > me.clickPixelThresh || diffY > me.clickPixelThresh) {
                //详见11分析
me.startDrag(me.startX, me.startY);
            }
        }
//此时的dragThreshMet = true(看看11的最后一行代码)
        if (me.dragThreshMet) {
            current.b4Drag(e);//开始执行真正的移动**(见16)
            current.onDrag(e);//开始执行真正的移动**
            if (!current.moveOnly) {
                me.fireEvents(e, false);
            }
        }

        me.stopEvent(e);

        return true;
    }
16.Ext.dd.DD.b4Drag
     b4Drag: function(e) {
//（见17分析）
        this.setDragElPos(e.getPageX(), e.getPageY());
    }

17.Ext.dd.DD.setDragElPos
setDragElPos: function(iPageX, iPageY) {
        var el = this.getDragEl();
        this.alignElWithMouse(el, iPageX, iPageY);
    }