div跟随鼠标移动
作者：互联网
<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>
标签：box,鼠标,跟随,delY,var,div,event 来源： https://www.cnblogs.com/lanmingjia/p/15477793.html