原生JS實現彈出窗口的拖拽

　　上一篇說了一下彈出窗口功能的實現思路，一般情況下緊接着就會需要做到彈窗的移動，當然現在有很插件、庫比如hammer可以使用，效率也非常好。但我覺得還是有必要了解一下原生JS的實現思路及方式，如下：

　　思路：拖動這個操作起始分為三個部分：

1. 鼠標左鍵按下，此時才開始可以拖動；
2. 鼠標移動，拖動開始；根據光標的移動給div相對應的縱軸、橫軸的偏移；
3. 鼠標左鍵松手，拖動結束，不可以再拖動了。

　　每一步需要做的事：

　　1中需要將初始化的拖動標示量置為true（可以拖動了）、記錄光標起始坐標和div的起始坐標

　　2中記錄光標移動量，並將光標偏移量實時反映到div的坐標位置中去，div坐標實時同步光標移動，從而達到拖動效果

　　3拖動標示量置為false（不可以拖動了）

---

 

具體實現拖拽的JS代碼：

function DivMove(divId, h2Tag) {
        var oWin = document.getElementById(divId);
        var oH2 = oWin.getElementsByTagName(h2Tag)[0];
        var bDrag = false;
        var disX = disY = 0;
        oH2.onmousedown = function (event) {
            var event = event || window.event;
            bDrag = true;
            disX = event.clientX - oWin.offsetLeft;
            disY = event.clientY - oWin.offsetTop;
            this.setCapture && this.setCapture();
            return false
        };
        document.onmousemove = function (event) {
            if (!bDrag) return;
            var event = event || window.event;
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
            var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
            iL = iL < 0 ? 0 : iL;
            iL = iL > maxL ? maxL : iL;
            iT = iT < 0 ? 0 : iT;
            iT = iT > maxT ? maxT : iT;

            oWin.style.marginTop = oWin.style.marginLeft = 0;
            oWin.style.left = iL + "px";
            oWin.style.top = iT + "px";
            return false
        };
        document.onmouseup = window.onblur = oH2.onlosecapture = function () {
            bDrag = false;
            oH2.releaseCapture && oH2.releaseCapture();
        };
    }