onmousedown 移动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#aa {
background: red;
width: 200px;
height: 200px;
position: absolute;
}
</style>
<body>
<div id="aa"></div>
<script>
var div = document.getElementById('aa')
function move(img) {
img.onmousedown = function (e) {
var oldl = e.pageX - img.offsetLeft //鼠标距离div左侧的距离
var oldt = e.pageY - img.offsetTop //鼠标距离div右侧的距离
var w = window.innerWidth - img.offsetWidth
var h = window.innerHeight - img.offsetHeight
window.onmousemove = function (e) {
var dx = e.pageX - oldl //结束时鼠标的位置减去鼠标距离div左侧的距离得到div需要移动的距离
var dy = e.pageY - oldt
if (dx < 0) {
dx = 0
}
if (dx > w) {
dx = w
}
if (dy < 0) {
dy = 0
}
if (dy > h) {
dy = h
}
img.style.left = dx + 'px'
img.style.top = dy + 'px'
}
window.onmouseup = function () {
window.onmousemove = null
}
}
}
move(div)
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。