js實現可視化區域內拖拽
阿新 • • 發佈：2017-07-27
posit scrip red off initial cti false top wid
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <style> #div1{width: 100px;height: 100px;background-color: red;position: absolute;} </style> <body> <div id="div1"></div> </body> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById(‘div1‘); disX=0; disY=0; oDiv.onmousedown=function(ev){ var oEvent=ev || event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){ l=document.documentElement.clientWidth-oDiv.offsetWidth; }if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){ t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+‘px‘; oDiv.style.top=t+‘px‘; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } return false;//阻止默認事件 屏蔽火狐的bug } } </script> </html>
js實現可視化區域內拖拽