拖拽效果的實現
阿新 • • 發佈：2020-12-17
<body> <div></div> <script> var Box = document.getElementsByTagName("div")[0]; //滑鼠按下 Box.onmousedown = function (e) { var e = e || window.event; var BoxLeft = e.clientX - Box.offsetLeft;//滑鼠到盒子左邊的距離 var BoxTop = e.clientY - Box.offsetTop;//滑鼠到盒子上邊的距離 //滑鼠移動 document.onmousemove = function (e) { var e = e || window.e; Box.style.left = e.clientX - BoxLeft + 'px';//改變Box的left值 Box.style.top = e.clientY - BoxTop + 'px';//改變Box的top值 } //滑鼠抬起,滑鼠抬起時結束盒子的移動 document.onmouseup = function () { document.onmousemove = null;//取消滑鼠移動事件 } } </script> </body>
