代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0rem;
padding: 0rem;
}
html,
body {
height: 100%;
width: 100%;
}
#wrap {
height: 200px;
width: 200px;
background-color: darkolivegreen;
/* margin: 120px auto; */
position: absolute;
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap')
var isMove = false
wrap.addEventListener('mousedown', function(e) {
isMove = true
// var x = e.clientX
// var y = e.clientY
// var x1 = x-wrap.offsetLeft
// var y1 = y-wrap.offsetTop
})
wrap.addEventListener('mouseup', function(e) {
isMove = false
})
document.addEventListener('mousemove', function(e) {
if (isMove) {
var x2 = e.clientX
var y2 = e.clientY
wrap.style.left = x2-100 + 'px'
wrap.style.top = y2-100 + 'px'
} else {
return
}
})
</script>
</body>
</html>