Ext框架下的元素拖动

Posted 2020-10-10

最开始使用的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) {
                //拖动结果处理
            }；
}