本文通過(guò)拖拽案例，實(shí)現(xiàn)“跟隨鼠標(biāo)、邊界限定、軌跡回放”三大效果；
完整代碼中有詳盡注釋，故不再進(jìn)行細(xì)致講解；
對(duì)于案例中需要注意的重點(diǎn)或易錯(cuò)點(diǎn)問(wèn)題，會(huì)總結(jié)在最后。
效果圖（僅演示左、上邊界限定）
盒子拖拽效果圖
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子拖拽</title>
<style>
body{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: skyblue;
position: absolute;
/* 盒子在頁(yè)面中的初始位置，可以隨意設(shè)置 */
left: 200px;
top: 200px;
}
#btn{
display: inline-block;
width: 80px;
height: 30px;
font-size: 16px;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<div id="box"><button id="btn">軌跡回放</button></div>
<script>
var box_ele = document.getElementById("box");
// 聲明位置數(shù)組，用于記錄盒子每次移動(dòng)后的位置
var position_arr = [];
// 獲取頁(yè)面初始寬高，用于限定盒子移動(dòng)邊界
var screen_width = document.body.offsetWidth;
var screen_height = window.innerHeight; // 注意頁(yè)面高度不能通過(guò) document.body.offsetTop 獲取
// 功能1:拖拽
// 設(shè)置變量記錄鼠標(biāo)的狀態(tài)，鼠標(biāo)按下時(shí)為true
var flag = false;
// 鼠標(biāo)按下準(zhǔn)備拖拽，記錄鼠標(biāo)按下時(shí)的位置
var mouse_x, mouse_y;
box_ele.addEventListener("mousedown", function(evt){
flag = true;
var e = evt || event;
mouse_x = e.offsetX; // 要以元素做參照物，用offset，不能用client
mouse_y = e.offsetY;
// 將盒子初始位置(盒子元素偏移量)記錄在位置數(shù)組中
position_arr.push({
x : box_ele.offsetLeft,
y : box_ele.offsetTop
})
})
// 鼠標(biāo)移動(dòng)拖拽開始
// 事件綁定在document上，避免因鼠標(biāo)移動(dòng)速度太快超出盒子邊界時(shí)盒子跟不上
document.addEventListener("mousemove", function(evt){
if(flag){
var e = evt || event;
// 聲明盒子的位置
var box_left = e.clientX - mouse_x;
var box_top = e.clientY - mouse_y;
// 通過(guò)頁(yè)面初始寬高和盒子寬高計(jì)算獲得盒子移動(dòng)的最大值
var move_width_max = screen_width - box_ele.offsetWidth;
var move_height_max = screen_height - box_ele.offsetHeight;
// 分別限定盒子移動(dòng)的左右上下邊界
box_left = box_left <= 0 ? 0 : box_left;
box_left = box_left >= move_width_max ? move_width_max : box_left;
box_top = box_top <= 0 ? 0 : box_top;
box_top = box_top >= move_height_max ? move_height_max : box_top;
// 將數(shù)據(jù)賦值給盒子從而在頁(yè)面中渲染
box_ele.style.left = box_left + "px";
box_ele.style.top = box_top + "px";
// 若x或y方向移動(dòng)距離大于5px，則將移動(dòng)后的盒子位置記錄到位置數(shù)組中（避免數(shù)組中保存數(shù)據(jù)過(guò)多，消耗性能）
if(box_left >= position_arr[position_arr.length - 1].x + 5 || box_top >= position_arr[position_arr.length - 1].y + 5){
position_arr.push({
x : box_left,
y : box_top
})
}
}
})
// 鼠標(biāo)抬起拖拽停止
box_ele.addEventListener("mouseup", function(){
flag = false;
})
// 功能2:回放
var btn_ele = document.getElementById("btn");
var timer;
btn_ele.addEventListener("click", function(){
// 原思路：通過(guò)for循環(huán)遍歷位置數(shù)組中的每一個(gè)位置
// 由于for循環(huán)執(zhí)行太快，故使用定時(shí)器
timer = setInterval(function(){
// 每次取出位置數(shù)組中的最后一個(gè)元素位置
var last_position = position_arr.pop();
box_ele.style.left = last_position.x + "px";
box_ele.style.top = last_position.y + "px";
// 當(dāng)移動(dòng)到最后一個(gè)位置（即位置數(shù)組中數(shù)據(jù)為空）時(shí)，關(guān)閉定時(shí)器
if(position_arr.length === 0){
clearInterval(timer);
}
}, 50)
})
</script>
</body>
</html>
注意點(diǎn)
1、鼠標(biāo)拖拽過(guò)程中的盒子位置需要通過(guò) 鼠標(biāo)位置 - 初始時(shí)鼠標(biāo)相對(duì)于元素位置 獲取，即
box_left = e.clientX - mouse_x
box_top = e.clientY - mouse_y;，
否則盒子會(huì)出現(xiàn)在鼠標(biāo)的右下方。
2、初始的頁(yè)面高度不能通過(guò) document.body.offsetTop 獲取，需要用 window.innerHeight；
3、限制鼠標(biāo)移動(dòng)邊界時(shí)，寬高方向的最大值需要通過(guò) 初始頁(yè)面寬高 - 盒子寬高 獲取，即
move_width_max = screen_width - box_ele.offsetWidth;
move_height_max = screen_height - box_ele.offsetHeight;
4、軌跡回放時(shí)，目標(biāo)是位置數(shù)組中從后往前依次取出元素，最好的辦法就是使用 pop()。
5、注意定時(shí)器的關(guān)閉條件。position_arr.length === 0
