原生js实现鼠标拖拽

原生js实现鼠标拖曳

HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标拖拽</title>
</head>
<body>
<h1>鼠标拖拽</h1>
<div id="box"></div>
</html>

CSS部分代码

* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
}

JS部分代码

// 获取元素
var oBox = document.getElementById("box");
// 鼠标按下事件
oBox.onmousedown = function (ev) {
var ev = ev || window.event;
	// 获取鼠标相对于盒子的坐标        
        var x1 = ev.offsetX;        
        var y1 = ev.offsetY;
        // 鼠标移动        
        document.onmousemove = function (ev) {
        	var ev = ev || window.event;
        	var x2 = ev.pageX;
        	var y2 = ev.pageY;
        	oBox.style.top = y2 - y1 + "px";
        	oBox.style.left = x2 - x1 + "px"
        	}
        }
	// 鼠标松开事件,用于解决鼠标松开以后盒子继续跟着移动的问题
	//函数内部执行代码为空来解决,这是一个很好的思路
	document.onmouseup = function () {
		document.onmousemove = function () {
		}    
	}

整体思路就是这样,之前写的时候最后那个松开鼠标后盒子继续移动的问题没有解决好,最后才找到这个解决办法。

你可能感兴趣的:(web前端,事件对象,javascript)