<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box {
height: 100px;
width: 100px;
border: 1px black solid;
padding: 20px;
margin: 30px;
background-color: red;
/* 设置定位属性,left和top才会生效 */
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var boxEle = document.getElementById("box");
//1、监听鼠标按键被按下事件
boxEle.onmousedown = function (ev) {
var e = ev || window.event;
//记录鼠标按下时与元素左侧的相对距离
var X = e.clientX - boxEle.offsetLeft;
//记录鼠标按下时与元素上方的相对距离
var Y = e.clientY - boxEle.offsetTop;
//2、监听鼠标按下后的移动事件
document.onmousemove = function (ev) {
var e = ev || window.event;
boxEle.style.left = e.clientX - X + "px";//元素被移动后的坐标
boxEle.style.top = e.clientY - Y + "px";//元素被移动后的坐标
};
//3、监听鼠标按键松开后的事件
document.onmouseup = function () {
document.onmousemove = null;//停止鼠标移动事件的触发
};
};
</script>
</body>
</html>
11-15
1395
07-15