JS事件_拖拽封裝

寫在前面,初學者,共同進步 ,個人筆記分享

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 框架下載
運用的例子

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 之前寫過一篇瀏覽器事件的相關操作和事件運行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件...
    faremax閱讀 1,649評論 0 0
  • 因為要做一個地圖操作的項目,需要用到這個地圖庫,但是查詢官方API麻煩,而且這個地圖框架的API做的用起來確實太麻...
    虛幻的銹色閱讀 34,000評論 1 15
  • 我們首先要明白,我們給頁面添加效果用到的js到底是什么?js其實包含三部分:dom 文檔對象模型 bom 瀏覽...
    一直以來都很好閱讀 817評論 0 0
  • 前陣子讀到老舍先生筆下的春光,便憧憬著如他般躺在春光里,眼留著一條小縫,收取著天上輕松愜意的暖光。春晴果然值得等...
    張茜茜5665閱讀 374評論 3 2
  • 10 · · 人的行為是最難判斷的。比如有一場大眾投票的選美比賽。一般人都會選自己認為最漂亮的那個。稍微聰明一點的...
    碇姜山閱讀 321評論 0 2