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

QQ面板拖拽，效果如图JavaScript代码如下：functiongetByClass(clsName,parent){varoParent=parent?document.

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

QQ面板拖拽 js面板拖拽 DOM事件