最開始使用的js的原生代碼：

一般的js的元素拖動，可用三個事件進行監控處理：mousedown、mousemove、mouseup

onNestThumbFrameDrag: function(evt) {
    var self = this;

    switch(evt.type) {
        case "mousedown":
            self.draging = true;
        break;

        case "mousemove":
            if (self.draging) {
                
 
//拖動過程中的相關邏輯處理
            }
        break;
        
        case "mouseup":
              self.draging = false;
              //拖動結束後的相關邏輯處理
        break;
    }
}
                        

該過程要註意兩點：

1.拖動時候，若開始拖動速度較快，會導致拖動的鼠標偏離拖動物，所以mousemove 和 mouseup 不能只綁定在拖動物體上，要根據情況綁定在拖動範圍的節點上或者body上

2.mousedown時候，要給定一個標記，表示鼠標按下，之後mousemove的時候要判斷鼠標按下後，才進行拖動處理

Ext也有封裝了一個dd模塊，進行元素的拖動處理：

initNestThumbFrameDrag: function() {
            var self = this;

            var dd = new Ext.dd.DD(‘nest-thumbnail-frame‘);

            dd.startDrag = function(x, y) {
                //拖動前的邏輯處理
                
                //將拖動區域限制在id為nest-thumbnail的元素區域內
                //
 
dd.constrainTo(‘nest-thumbnail‘);
                
                //限制拖動的相對位移（相對當前拖動物體的位置）
                //setXConstraint( int iLeft, int iRight, int iTickSize ) : void    
                //setYConstraint( int iUp, int iDown, int iTickSize ) : void
                dd.setXConstraint(0,0);//限制不能左右移動，即，只能上下移動
            };

            dd.onDrag = function(evt) {
                //拖動過程邏輯處理
            }；

            dd.endDrag = function(evt) {
                //拖動結果處理
            }；
}    

Ext框架下的元素拖動