拖拽函数的简单封装

函数封装的好处就是简化代码量，便于我们查看和维护；其次就是可以重复调用，避免许多重复的代码；js中的许多方法就是js作者所封装好的函数，我们只要直接调用就可以了。

login.jpg

图中所示就是拖拽的原理;同理可以得出Y轴的移动距离,然后就是在移动时赋值给登陆框。

l模拟百度登陆框的效果

拖拽函数的封装

function drag(obj, box) { //obj:拖拽的对象;box:移动的对象;  一个参数时拖动自身;
if (box) {} else {//当第二个参数为空时，调用obj;
    box = obj;
};
var distanceTop = box.offsetTop - obj.offsetTop;//拖拽对象与移动对象的偏离值;
var distanceLeft = box.offsetLeft - obj.offsetLeft;
obj.onmousedown = function(ev) { //点击登陆窗口顶部，获取偏移值;
    even(ev);//封装的事件对象函数
    stopBubble(ev);//封装的取消冒泡函数
    var disx = ev.offsetX;
    var disy = ev.offsetY;
    var l = 0;//登陆框移动的X轴距离
    var t = 0;//登陆框移动的Y轴距离
    if (obj.setCapture) {
        obj.setCapture();
    }
    document.onmousemove = function(ev) { //拖拽窗口;
        var ev = ev || window.event;
        l = ev.clientX - disx;
        if (l < 0) {//限定登陆移动的距离，禁止移除窗口;
            l = 0;
        } else if (l >= document.documentElement.clientWidth - box.offsetWidth) {
            l = document.documentElement.clientWidth - box.offsetWidth;
        }
        t = ev.clientY - disy;
        if (t < 0) {//限定登陆移动的距离，禁止移除窗口;
            t = 0;
        } else if (t >= document.documentElement.clientHeight - box.offsetHeight) {
            t = document.documentElement.clientHeight - box.offsetHeight;
        }
        box.style.left = l + distanceTop + 'px';
        box.style.top = t + distanceLeft + 'px';
    }
    document.onmouseup = function() { //松开鼠标取消事件;
        document.onmousemove = null;
        if (obj.releaseCapture) {
            obj.releaseCapture();
        };
    };
    return false;
};

<code>drag（oDiv）</code>直接就可以调用这个函数，移动<code>oDiv</code>这个元素，当然事先得获取这个元素，还有一点你得给这个元素的css样式添加定位,否则无法移动。

这里的<code>oDiv</code>就是‘传参’，传入的参数可与<code>function drag(obj, box)</code>中的'实参'个数不同。1个参数时是移动自身；2个参数时，<code>obj:</code>拖拽的对象;<code>box:</code>移动的对象;

当然，这只是一个简单的封装，并不能保证100%适用；在这个函数封装的过程中，最重要的就是事件流了；

事件流

事件流描述的就是从页面中接受事件的顺序；

如果你单击了某个按钮，单击事件并不仅仅发生在这个按钮上，相当于你同时也单击了按钮的容器元素，甚至单击了整个页面。

但有意思的时，在遇到这个问题时，IE团队和网景团队提出了完全相反的事件流概念。IE提出的是事件冒泡流，即事件从子元素传递到父元素上；而网景团队提出的是事件捕获流，事件从父元素传递到子元素上；

w3c就在这个前提下，取了折中的办法，规定事件先经过捕获阶段，然后是目标阶段，再到冒泡。

既然有冒泡，也就有取消冒泡，避免事件冲突；

就像图中的登陆框一样，你点击了其中的输入框，相当于同时也点击登录框，如果事先并未处理，造成的结果就是无法让输入框获取光标。