JS事件_拖拽封装

互联网 来源:小夫特 74℃ 0评论

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

01



拖拽.gif

拖拽

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

02


  • 面向对象的方法,构造函数里保存属性,方法使用函数名.prototype.方法名
  • disXdisY分别是鼠标与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 框架下载
运用的例子