拖动事件的实现 js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box{ height: 300px; width: 300px; background-color: aqua; position: absolute; left: 100px; top: 50px; } </style> </head> <body style="position: relative;height: 100%;"> <div id="box"></div> <script> let box = document.querySelector('#box') //拿到box元素 box.onmousedown = function(e){ //鼠标按下事件 console.log(e.pageX) //pageX是整个页面的点击的地方 console.log(e.target.offsetLeft)//offsetLeft 相对于当前div的左边或者上边的偏移量 let x = e.pageX - e.target.offsetLeft //获取div中点击的地方(左边) let y = e.pageY - e.target.offsetTop //获取div中点击的地方(顶部) box.onmousemove =function(e){ //鼠标移动事件 console.log(111,e.pageX,e.pageY) box.style.left = e.pageX - x+'px' //div的最左边位置 只要移动就获取最新的位置 赋值给left box.style.top = e.pageY - y+'px' //div的最顶部位置 只要移动就获取最新的位置 赋值给top } box.onmouseup = function(){//鼠标松开 删除移动事件 this.onmousemove = null } console.log(x,y) } </script> </body> </html>
可随意拖动
思路: 鼠标按下事件里加入 鼠标移动事件 可实现
先获取div中点击的位置的值(div左边到点击的值 或者 顶部到点击位置的值) 然后鼠标移动 就用pageX减去这个值 就是当前的left了 然后给div的left赋值就可以了