先上效果图
附上代码
<!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>
.four {
width: 200px;
height: 100px;
background-color: #00f;
position: relative;
}
</style>
</head>
<body>
<div class="four" style="top:0;left:0"></div>
<script>
var div = document.getElementsByTagName('div')[0];
function drag() {
var disX,
disY;
div.addEventListener('mousedown', function (e) {
var e = e || window.event;
disX = e.pageX - parseInt(div.style.left);
disY = e.pageY - parseInt(div.style.top);
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', function (e) {
document.removeEventListener('mousemove', move);
})
})
function move(e) {
var e = e || window.event;
div.style.left = (e.pageX - disX) + 'px';
div.style.top = e.pageY - disY + 'px';
}
}
drag()
</script>
</body>
</html>
