js封裝拖拽函式
阿新 • • 發佈:2018-12-28
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; position: absolute; } p{ width: 100px; height: 100px; background: red; position: absolute; top:100px } </style> </head> <body> <div></div> <p></p> </body> <script type="text/javascript"> var box = document.getElementsByTagName("div")[0]; var box1 = document.getElementsByTagName("p")[0]; function drag(obj){ obj.onmousedown=function(e){ var evt = e||window.event; var xx = evt.clientX-obj.offsetLeft; var yy = evt.clientY-obj.offsetTop; document.onmousemove=function(e){ var evt =e||window.event; var x = evt.clientX-xx; var y = evt.clientY-yy; if(x<0){ x =0; } if(x>document.documentElement.clientWidth-obj.offsetWidth){ x= document.documentElement.clientWidth-obj.offsetWidth; } if(y<0){ y =0; } if(y>document.documentElement.clientHeight-obj.offsetHeight){ y = document.documentElement.clientHeight-obj.offsetHeight; } obj.style.left=x+"px"; obj.style.top=y+"px"; return false; } document.onmouseup=function(){ document.onmousemove = null; document.onmouseup = null; } } } drag(box); drag(box1); </script> </html>