<html> <body> <style id="css"> body{font-family:Verdana;font-size:11px;color:#333;} #win{position:absolute;left:100px;top:100px;width:200px;height:150px;border:1px solid #000;} .title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;} </style> <script> var x0=0,y0=0,x1=0,y1=0; var moveable=false; //开始拖动; function startDrag(obj){ if(event.button==1){ obj.setCapture(); var win = obj.parentNode; x0 = event.clientX; y0 = event.clientY; x1 = parseInt(win.offsetLeft); y1 = parseInt(win.offsetTop); moveable = true; } } //拖动; function drag(obj){ if(moveable){ var win = obj.parentNode; win.style.left = x1 + event.clientX - x0; win.style.top = y1 + event.clientY - y0; } } //停止拖动; function stopDrag(obj){ if(moveable){ obj.releaseCapture(); moveable = false; } } </script> <div id="win"> <div class="title" οnmοusedοwn="startDrag(this)" οnmοuseup="stopDrag(this)" οnmοusemοve="drag(this)">窗口1</div> <div> 现在可以动了.<br> 删了很多代码,自己看看吧.<br> </div> </div> </body> < ml>
js拖动效果
最新推荐文章于 2024-04-24 09:27:42 发布