标签:event doc style 移动 坐标 false move 实现 计算
很简单的思路,通过三个鼠标事件:点击、移动、抬起,只要计算出当前位置即可,如果是图片的话加入:e.preventDefault();即可
//获取元素 var dv = document.getElementById(‘dv‘); var x = 0; var y = 0; var l = 0; var t = 0; var isDown = false; //鼠标按下事件 dv.onmousedown = function(e) { //获取x坐标和y坐标 x = e.clientX; y = e.clientY; //获取左部和顶部的偏移量 l = dv.offsetLeft; t = dv.offsetTop; //开关打开 isDown = true; //设置样式 dv.style.cursor = ‘move‘; } //鼠标移动 window.onmousemove = function(e) { if (isDown == false) { return; } //获取x和y var nx = e.clientX; var ny = e.clientY; //计算移动后的左偏移量和顶部的偏移量 var nl = nx - (x - l); var nt = ny - (y - t); dv.style.left = nl + ‘px‘; dv.style.top = nt + ‘px‘; } //鼠标抬起事件 dv.onmouseup = function() { //开关关闭 isDown = false; dv.style.cursor = ‘default‘; }
标签:event doc style 移动 坐标 false move 实现 计算
原文地址:https://www.cnblogs.com/zhoudawei/p/13958490.html