e.offsetX是鼠标距离准确事件源的左上角距离
e.clientX是鼠标距离浏览器可视窗口左上角的距离
e.pageX是鼠标距离文档左上角的距离
/*
当鼠标点击div时开始挪动,当鼠标抬起,div静止------事件源是div
当鼠标点击后,鼠标在移动------事件源是document
事件类型------鼠标事件
事件处理函数------要做的式是改变div的位置
*/
javascript<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: pink; position: absolute; left: 0; top: 0; } </style> </head> <body> <div> </div> <script> var box = document.querySelector('div') var startX=0 //记录鼠标初始距离div的X位置 var startY=0 var flag = false //当点击div时移动div位置,否则不移动 box.onmousedown = function (e) { startX = e.offsetX startY = e.offsetY flag = true } document.addEventListener('mousemove', function (e) { if (flag == false) { return } x = e.clientX - startX; y = e.clientY - startY; if (x <= 0) { x = 0; } if (y <= 0) { y = 0; } box.style.left = x + "px"; box.style.top = y + "px"; }) box.onmouseup = function (e) { flag = false //当抬起鼠标不移动 // console.log('鼠标抬起的位置', e.offsetX, e.offsetY) } </script> </body> </html>
优化:
x最大值应该是:
27.js实现鼠标拖拽
Deng.9942024-07-17 12:38
相关推荐
YUELEI1181 小时前
Vue-Route4 tstanzongbiao1 小时前
身份证阅读器API模式 VUE Dorado7逝缘~3 小时前
css百分比布局中height:100%不起作用Passion不晚3 小时前
打造古风炫酷个人网页:用HTML和CSS3传递笔墨韵味浏览器爱好者4 小时前
如何在Chrome中使用HTML构建交互式网页gs801404 小时前
安装node 报错需要:glibc >= 2.28Random_index7 小时前
#名词区别篇:npx pnpm npm yarn区别B.-7 小时前
Remix 学习 - 路由模块(Route Module)陈大爷(有低保)7 小时前
JS基础语法不修×蝙蝠8 小时前
Javascript应用(TodoList表格)