即时通信软件面板拖拽，效果如图

Java脚本语言代码如下：

函数getByClass(clsName，parent) { var oParent=parent？document.getElementById(父级):文档，eles=[]，elements=opa租金。getelementsbytagname(' * ')；for (var i=0，l=elements.lengthI li ) { if (elements[i]).类名==cls名称){ eles。推送(元素[I])；} }返回eles} window.onload=drag函数drag(){ var oTitle=getByClass(' log in _ logo _ webqq '，' loginPanel ')[0]；//拖页oTitle.onmousedown=fnDown//关闭页面var close=文档。getelementbyid(' ui _ box circle ')；close.onclick=winClose//切换状态var loginState=文档。getelementbyid(' loginState ')；var StateList=文档。GetElementByID(' loginstastpanel ')；统计学家。GetElementsBytagname(' Li ')；var stateTxt=文档。getelementbyid(' login2qq _ state _ txt ')；var loginstteshow=document。getelementbyid(' logins teshow ')；//点击显示下拉单loginstate。onclick=function(e){ Statist。风格。display=' block//阻止事件冒泡；e=事件| | window . event if(e . stopperpagation){ e . stopperpagation()；} else { e.cancelBubble=true } }//鼠标滑过，背景变色for(var I=0；一。长度；i ) { lis[i].onmouseover=function(){ this。风格。背景颜色=' # 888 '；};lis[i].onmouseout=function(){ this。风格。背景颜色=' # fff};//鼠标点击，txt改变，图标改变lis[i].onclick=function(e){ Statist。风格。显示='无'；//阻止事件冒泡e=事件| | window . event if(e . stopperpagation的类型){ e . stopperpagation()；} else { e . cancelubble=true } var id=this . idlogins teshow。类名=' log in-state-show ' id；var text=getByClass(' StateSelect _ text '，id)[0].innerhtml statetxt . innerhtml=text } }文档。onclick=function(){ Statist。风格。显示='无'；} }函数winClose(){ var box=document。getelementbyid(' loginPanel ')；盒子。风格。显示='无'；}函数fnDown(event){ var event=event | | window。事件；var oDrag=文档。getelementbyid(' loginPanel ')；//光标按下时光标和面板之间的距离；var DIsX=事件。客户端x-odrag。offsetleftvar disY=事件。clienti-odrag。偏移；//移动文件。onmousemove=function(event){ event=event | | window。事件；fnMove(事件、disX、DIsY)；};文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=null} }函数fnMove(event，posX，posY){ var oDrag=document。getelementbyid(' loginPanel ')；var l=事件。客户端x-POSx；var t=事件。clienty-POSy；var WinW=文档。文档元素。客户端宽度；var WinH=文档。文档元素。客户身高；var MaxW=WinW-odrag。偏移量为-10；var MaxH=WinH-odrag。偏右；//当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。风格。left=l ' px奥德拉格。风格。top=t ' px}要点：

1.阻止事件冒泡

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

loginstate。onclick=function(){ Statist。风格。display=' block}文档。onclick=function(){ Statist。风格。显示='无'；}lis[i].onclick列表项的点击事件冒泡，导致下拉列表无法隐藏

lis[i].onclick=function(){ Statist。风格。显示='无'；} loginstate。onclick=function(){ Statist。风格。display=' block}2.鼠标事件坐标获取

函数fnDown(event){ var event=event | | window。事件；var oDrag=文档。getelementbyid(' loginPanel ')；//光标按下时光标和面板之间的距离；var DIsX=事件。客户端x-odrag。offsetleftvar disY=事件。clienti-odrag。偏移；//移动文件。onmousemove=function(event){ event=event | | window。事件；fnMove(事件、disX、DIsY)；};文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=null} }函数fnMove(event，posX，posY){ var oDrag=document。getelementbyid(' loginPanel ')；var l=事件。客户端x-POSx；var t=事件。clienty-POSy；var WinW=文档。文档元素。客户端宽度；var WinH=文档。文档元素。客户身高；var MaxW=WinW-odrag。偏移量为-10；var MaxH=WinH-odrag。偏右；//当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。风格。left=l ' px奥德拉格。风格。top=t ' px}3.封装各浏览器通用的getElementsByClassName()方法

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

函数getByClass(clsName，parent) { var oParent=parent？document.getElementById(父级):文档，eles=[]，elements=opa租金。getelementsbytagname(' * ')；for (var i=0，l=elements.lengthI li ) { if (elements[i]).类名==cls名称){ eles。推送(元素[I])；} }返回eles}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。