還是先上個圖：
簡單來講：我們現在要做的就是將黃色方塊固定，然後可以用鼠標隨意拖拽紅色方塊
再看需求：
1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
3.當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標拖拽元素</title>
<link rel="stylesheet" href="drag.css">
<script src="drag.js"></script>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="box2"></div>
</body>
</html>
JS代碼：
/**
* Created by Barry on 2019-2-9.
*/
window.onload = function () {
var box1 = document.getElementById('box1');
/* 鼠標按下 */
box1.onmousedown = function(event) {
/* 拿到鼠標在box1的x,y */
event = event || window.event;
var x = event.offsetX;
var y = event.offsetY;
/* 鼠標開始拖拽，綁定事件，改變box1x,y */
document.onmousemove = function(event){
event = event || window.event;
box1.style.top = event.clientY-y + 'px';
box1.style.left = event.clientX-x + 'px';
};
/* 鼠標擡起，解綁事件 */
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
};
CSS代碼，可以注意的是絕對定位：
.box1{
width: 100px;
height: 100px;
background-color: red;
/* 絕對定位 - 必須！ */
position: absolute;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
/* 絕對定位 - 必須！ */
position: absolute;
left: 200px;
top: 200px;
}