拖拽函数的简单封装

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

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

拖拽函数的封装

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;
  };
}

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

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

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

事件流

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

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

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

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

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

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