<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>qq面板拖曳</title><style type="text/css">#qqmb{ width: 300px; height: 200px; border: black solid 1px; margin: 150px auto;}.yiDong{ width: 50px; height: 50px; border: black solid 1px; margin: 20px auto;}</style><script>function getByClass(clsName,parent){ var oParent = parent?document.getElementById(oparent):document, eles=[], elements = oparent.getElementsByTagName('*'); for (var i=0;i<elements.length;i++){ if (elements[i].className==clsName){ eles.push(elements[i]); } } return eles;}window.onload=drag;function drag(){ var oTitle = getByClass('yiDong','qqmb')[0]; oTitle.onmousedown=fnDown; }function fnDown(event){ event = event || window.event; var oDrag = document.getElementById('qqmb'), //光标按下时光标和面板之间的距离 disX = event.clientX - oDrag.offsetLeft; 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(e,posX,posY){ var oDrag = document.getElementById("qqmb"), l = e.clientX - posX, t = e.clientY - posY, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight, maxW = winW - oDrag.offsetLeft, maxH = winH - oDrag.offsetTop; if (l<0){ l = 0; }else if(l>maxW){ t = maxW; } if (t<0){ t=0; }else if(t>maxH){ t=maxH; } oDrag.style.left = l +'px'; oDrag.style.top = t +'px';}</script></head><body><div id="qqmb"> <div class="yiDong"> </div></div></body></html>
添加回答
举报
0/150
提交
取消