標籤：事件 initial blog ati document sem down idt window
<!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;//阻止預設事件 屏蔽Firefox的bug } }</script></html>
js實現可視化地區內拖拽
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
