JS事件_拖拽封装

写在前面，初学者，共同进步 ，个人笔记分享

01

拖拽.gif

拖拽

网页中经常需要div的拖动，这里写的封装的一个函数是无限制的拖拽，可以在子类中添加各种限制条件，完成拖拽。

02

• 面向对象的方法，构造函数里保存属性，方法使用**函数名.prototype.方法名
  **
• ** disX与disY分别是鼠标与div**的横向和纵向距离
• var _this = this; 解决了在后面的事件添加中，this的变化导致的错误
• 添加鼠标移动函数

/**
 * @constructor
 * @param {String} id = id为盒子div的id
 * @description 拖拽
 * @example 
 * var myDrag = new Drag('id'); 
 */
function Drag(id) {
    this.disX = 0;
    this.disY = 0;
    var _this = this;
    this.oDiv = document.getElementById(id);
    
    //鼠标按下事件
    this.oDiv.onmousedown = function() {
        _this.Down();
        //阻止默认事件
        return false;
    };  
}

03方法

鼠标按下

• 先记录鼠标按下的位置与div之间的距离
• 在鼠标按下函数中绑定鼠标移动和抬起事件
• setCapture函数功能：一旦窗口捕获了鼠标，所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。 简单来说，这里添加的意义就是在div上的事件，我们拖动div时，不会选中页面的其他内容。

//鼠标按下函数
Drag.prototype.Down = function(ev) {
    var _this = this;
    var oEvent = ev || event;
    //在鼠标按下的时候记录鼠标与div之间的横向纵向距离
    this.disX = oEvent.clientX - _this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - _this.oDiv.offsetTop;
    
    //事件绑定 解决拖动文字被选中的问题
    if (this.oDiv.setCapture) {
        //IE
        this.oDiv.onmousemove =function(){
            _this.fnMove(ev);
        };
        this.oDiv.onmouseup = function(){
            _this.fnUp(this);
        };
        this.oDiv.setCapture();
    } else{
        document.onmousemove = function(ev) {
            _this.fnMove(ev);
        };
        document.onmouseup = function() {
            _this.fnUp(this);       
        };
    }
}

鼠标移动与抬起

• 动态获取鼠标的位置，根据鼠标按下时存储的距离，计算div的位置，实时更新
• 鼠标抬起时释放事件

//鼠标移动时根据鼠标的位置计算div的位置并实时更新位置
Drag.prototype.fnMove = function(ev) {
    var oEvent = ev || event;
    var left = oEvent.clientX - this.disX;
    var top = oEvent.clientY - this.disY;

    this.oDiv.style.left = left + 'px';
    this.oDiv.style.top = top + 'px';
}
//鼠标抬起来的时候释放鼠标移动以及抬起事件
Drag.prototype.fnUp = function(oAttr) {
    oAttr.onmousemove = null;
    oAttr.onmouseup = null;
      //需要释放捕获的事件
    if (oAttr.releaseCapture) {
        oAttr.releaseCapture();
    }
}

04 使用

new Drag( );

• new一个实例
• 可以重写父类的方法

05 封装函数源码与小例子

js文件可直接引用
Drag.js 框架下载
运用的例子