標籤：改變 head meta fse client nbsp The htm 寬度
滑鼠拖拽事件：
<html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0; padding:0; } div{ width:100px; height:100px; background:red; position:absolute; /* 對元素進行定位*/ left:0; top:0; } </style> </head> <body> <div></div> </body> <script> var oDiv = document.getElementsByTagName(‘div‘)[0] var body = document.getElementsByTagName(‘body‘)[0] // 計算最大位移距離（後期判斷邊界時要用到） oDiv.offsetWidth：表示div的寬度 var maxLeft = window.innerWidth - oDiv.offsetWidth var maxTop = window.innerHeight - oDiv.offsetHeight // 滑鼠按下事件 oDiv.onmousedown = function (e) { var ev = e || event //記錄滑鼠在元素上的位置 var posX = ev.clientX-oDiv.offsetLeft var posY = ev.clientY-oDiv.offsetTop //滑鼠移動事件 body.onmousemove = function(e){ var ev = e || event //計算元素的位移 var left = ev.clientX-posX var top = ev.clientY-posY //判斷邊界 if (left<0){ left=0 }else if (left>maxLeft){ left=maxLeft } if (top<0){ top=0 }else if(top>maxTop){ top=maxTop } //重新設定屬性 oDiv.style.left = left + "px" oDiv.style.top = top + "px" } //滑鼠抬起事件 body.onmouseup = function(){ body.onmousemove = null body.onmouseup = null } } </script></html>
滑鼠拖拽事件
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
