js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

QQ面板拖拽，效果如图

JavaScript代码如下：

function getByClass(clsName, parent) {
 var oParent = parent ? document.getElementById(parent) : document,
   eles = [],
   elements = oParent.getElementsByTagName('*');

for (var i = 0, l = elements.length; i < l; i++) {
   if (elements[i].className == clsName) {
     eles.push(elements[i]);
   }
 }
 return eles;
}

window.onload = drag;

function drag() {
 var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
 //拖页
 oTitle.onmousedown = fnDown;
 //关闭页面
 var close = document.getElementById("ui_boxyClose");
 close.onclick = winClose;
 //切换状态
 var loginState = document.getElementById("loginState");
 var stateList = document.getElementById("loginStatePanel");
 var lis = stateList.getElementsByTagName("li");
 var stateTxt = document.getElementById("login2qq_state_txt");
 var loginStateShow = document.getElementById("loginStateShow");
 //点击显示下拉单
 loginState.onclick = function (e) {
   stateList.style.display = "block";
   //阻止事件冒泡；
   e = event || window.event;
   if(e.stopPropagation){
     e.stopPropagation();
   }else{
     e.cancelBubble = true;
   }
 };
 //鼠标滑过,背景变色
 for (var i = 0; i < lis.length; i++) {
   lis[i].onmouseover = function () {
     this.style.backgroundColor = "#888";
   };
   lis[i].onmouseout = function () {
     this.style.backgroundColor = "#fff";
   };
   //鼠标点击，txt改变，图标改变
   lis[i].onclick = function (e) {
     stateList.style.display = "none";
     //阻止事件冒泡
     e = event || window.event;
     if(typeof e.stopPropagation){
       e.stopPropagation();
     }else {
       e.cancelBubble = true;
     }
     var id = this.id;
     loginStateShow.className = "login-state-show "+id;
     var text = getByClass("stateSelect_text",id)[0].innerHTML;
     stateTxt.innerHTML = text;
   }

}
 document.onclick = function () {
   stateList.style.display = "none";
 }
}

function winClose() {
 var box = document.getElementById("loginPanel");
 box.style.display = "none";
}

function fnDown(event) {
 var event = event || window.event;
 var oDrag = document.getElementById("loginPanel");
 //光标按下时光标和面板之间的距离；
 var disX = event.clientX - oDrag.offsetLeft;
 var disY = event.clientY - oDrag.offsetTop;
 //移动
 document.onmousemove = function (event) {
   event = event || window.event;
   fnMove(event, disX, disY);
 };
 document.onmouseup = function () {
   document.onmousemove = null;
   document.onmouseup = null;
 }
}

function fnMove(event, posX, posY) {
 var oDrag = document.getElementById("loginPanel");
 var l = event.clientX - posX;
 var t = event.clientY - posY;
 var winW = document.documentElement.clientWidth;
 var winH = document.documentElement.clientHeight;
 var maxW = winW - oDrag.offsetWidth - 10;
 var maxH = winH - oDrag.offsetHeight;
 //当l=0时，窗口不能继续外移
 if (l < 0) {
   l = 0;
 } else if (l > maxW) {
   l = maxW;
 }

if (t < 10) {
   t = 10;
 } else if (t > maxH) {
   t = maxH;
 }

oDrag.style.left = l + "px";
 oDrag.style.top = t + "px";

}

要点： 

1.阻止事件冒泡

loginState.onclick点击事件冒泡，导致下拉列表无法点开

loginState.onclick = function () {
 stateList.style.display = "block";

}

document.onclick = function () {
   stateList.style.display = "none";

}

lis[i].onclick列表项的点击事件冒泡，导致下拉列表无法隐藏 

lis[i].onclick = function () {
 stateList.style.display = "none";

}

loginState.onclick = function () {
 stateList.style.display = "block";

}

2.鼠标事件坐标获取

function fnDown(event) {
 var event = event || window.event;
 var oDrag = document.getElementById("loginPanel");
 //光标按下时光标和面板之间的距离；
 var disX = event.clientX - oDrag.offsetLeft;
 var disY = event.clientY - oDrag.offsetTop;
 //移动
 document.onmousemove = function (event) {
   event = event || window.event;
   fnMove(event, disX, disY);
 };
 document.onmouseup = function () {
   document.onmousemove = null;
   document.onmouseup = null;
 }
}
function fnMove(event, posX, posY) {
 var oDrag = document.getElementById("loginPanel");
 var l = event.clientX - posX;
 var t = event.clientY - posY;
 var winW = document.documentElement.clientWidth;
 var winH = document.documentElement.clientHeight;
 var maxW = winW - oDrag.offsetWidth - 10;
 var maxH = winH - oDrag.offsetHeight;
 //当l=0时，窗口不能继续外移
 if (l < 0) {
   l = 0;
 } else if (l > maxW) {
   l = maxW;
 }

if (t < 10) {
   t = 10;
 } else if (t > maxH) {
   t = maxH;
 }

oDrag.style.left = l + "px";
 oDrag.style.top = t + "px";
}

3.封装各浏览器通用的getElementsByClassName()方法

方法返回的是一个数组，切记

function getByClass(clsName, parent) {
var oParent = parent ? document.getElementById(parent) : document,
 eles = [],
 elements = oParent.getElementsByTagName('*');

for (var i = 0, l = elements.length; i < l; i++) {
 if (elements[i].className == clsName) {
  eles.push(elements[i]);
 }
}
return eles;
}

来源：http://www.cnblogs.com/sunxirui00/p/7515618.html