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

这篇文章主要为大家详细介绍了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  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

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

以上就是js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）的详细内容，更多请关注0133技术站其它相关文章！