實現js拖動div
實現步驟：
- 鼠標按下時，標記元素爲可拖動狀態，並記下鼠標當前位置的偏移；
- 鼠標開始移動，判斷元素狀態是否可以拖動，如果是則更新元素位置到當前鼠標的位置；
- 放開鼠標後，元素變爲不可拖動狀態。
![在這裏插入圖片描述]()
圖示解釋：
![在這裏插入圖片描述]()
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠標拖動div</title>
<style media="screen">
.move {
width: 400px; height: 300px;
margin: 0 auto; border: 1px solid #cccccc;
position: absolute; left: 200px; top: 100px;
background: #e1eafc;
}
.move-header {
height: 50px; line-height: 50px;
text-align: center; background: #beceeb;
cursor: move;
user-select: none;
}
</style>
</head>
<body>
<div class="move" id="move">
<div class="move-header" id="move-header">
按住拖拽
</div>
<div class="move-body">
實現步驟。。。。
<p>1. 鼠標按下時，標記元素爲可拖動狀態，並記下鼠標當前位置的偏移；</p>
<p>2. 鼠標開始移動，判斷元素狀態是否可以拖動，如果是則更新元素位置到當前鼠標的位置；</p>
<p>3. 放開鼠標後，元素變爲不可拖動狀態。</p>
</div>
</div>
<script>
window.onload = function () {
var mouseOffsetX = 0; // 記錄當前鼠標位置
var mouseOffsetY = 0;
var isDraging = false; // 記錄元素是否可以拖動
// 鼠標事件1：鼠標按下標記元素爲可拖動狀態，並且記下鼠標當前位置的偏移
get('move-header').addEventListener('mousedown', function (e) {
var e = e || window.event;
// 鼠標距離div左側偏移距離 = e.pageX鼠標距離頁面左側距離 - get('move').offsetLeft爲div距離頁面左側距離
mouseOffsetX = e.pageX - get('move').offsetLeft;
mouseOffsetY = e.pageY - get('move').offsetTop;
isDraging = true;
})
// 鼠標事件2：鼠標開始移動，要檢測浮層是否標記爲移動，如果是則更新元素位置到當前鼠標位置
document.onmousemove = function (e) {
var e = e || window.event;
var moveX = 0;
var moveY = 0;
if (isDraging === true) {
// div左側距離頁面左側距離 = e.pageX鼠標距離頁面左側距離 - mouseOffsetX鼠標距離div左側偏移距離
moveX = e.pageX - mouseOffsetX;
moveY = e.pageY - mouseOffsetY;
get('move').style.left = moveX + "px";
get('move').style.top = moveY + "px";
}
}
// 鼠標事件3：放開鼠標後，元素變爲不可拖動
document.onmouseup = function () {
isDraging = false;
}
function get (id) {
return document.getElementById(id)
}
}
</script>
</body>
</html>