<!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>
那個DOM時間探秘中的qq面板拖曳問題模仿寫了一下代碼發現拖不動,,不知道哪里錯了。。
lyluly
2017-01-24 22:31:03