div跟隨滑鼠移動
阿新 • • 發佈：2021-10-28
<style>
body {
position: relative;
}
.box { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } </style> </head>
<body> <div class="box"></div> </body>
<script> // 獲取div var box = document.querySelector(".box"); // console.log(box);
// 設定一個變數判斷滑鼠按下和鬆開處理 var judge = false;
// 定義要刪除的具體距離變數 var delX = 0, delY = 0;
// 滑鼠按下進行處理 box.onmousedown = function (e) { // 這一步是處理div啟動時移動不是跟隨滑鼠的相對位置 // 滑鼠的文件位置減去在div中的位置 delX = e.clientX - this.offsetLeft; // console.log(delX); delY = e.clientY - this.offsetTop; // console.log(delY); judge = true; }
box.onmousemove = function () { if (judge) { // 根據滑鼠按下時處理完成的資料進行處理 // var x = event.clientX - delX, // y = event.clientY - delY;
// 若想滑鼠一直在div中間，則再進行處理資料（減去的就div的一半高和寬） var x = event.clientX - box.offsetWidth / 2, y = event.clientY - box.offsetHeight / 2;
box.style.top = y + "px"; box.style.left = x + "px"; } } box.onmouseup = function () { judge = false; } </script>
.box { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } </style> </head>
<body> <div class="box"></div> </body>
<script> // 獲取div var box = document.querySelector(".box"); // console.log(box);
// 設定一個變數判斷滑鼠按下和鬆開處理 var judge = false;
// 定義要刪除的具體距離變數 var delX = 0, delY = 0;
// 滑鼠按下進行處理 box.onmousedown = function (e) { // 這一步是處理div啟動時移動不是跟隨滑鼠的相對位置 // 滑鼠的文件位置減去在div中的位置 delX = e.clientX - this.offsetLeft; // console.log(delX); delY = e.clientY - this.offsetTop; // console.log(delY); judge = true; }
box.onmousemove = function () { if (judge) { // 根據滑鼠按下時處理完成的資料進行處理 // var x = event.clientX - delX, // y = event.clientY - delY;
// 若想滑鼠一直在div中間，則再進行處理資料（減去的就div的一半高和寬） var x = event.clientX - box.offsetWidth / 2, y = event.clientY - box.offsetHeight / 2;
box.style.top = y + "px"; box.style.left = x + "px"; } } box.onmouseup = function () { judge = false; } </script>