函数封装的好处就是简化代码量，便于我们查看和维护；其次就是可以重复调用，避免许多重复的代码；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就在这个前提下，取了折中的办法，规定事件先经过捕获阶段，然后是目标阶段，再到冒泡。
既然有冒泡，也就有取消冒泡，避免事件冲突；
就像图中的登陆框一样，你点击了其中的输入框，相当于同时也点击登录框，如果事先并未处理，造成的结果就是无法让输入框获取光标。
