本文介绍如何使用JavaScript实现一个50x50像素的色块拖动功能。通过监听鼠标事件记录拖动路径，并在松开鼠标后自动回放该轨迹。代码包含HTML结构、CSS样式及核心JS逻辑，适合前端初学者学习事件处理与DOM操作。
JS实现色块拖动录制功能
本文分享了一个使用JavaScript实现div色块拖动录制的完整示例，供读者参考学习。
功能描述：
创建一个尺寸为50x50像素的色块，用户拖动该色块以生成运动轨迹。当用户松开鼠标时，该色块将自动重复执行刚才记录的拖动路径。
效果展示：
<
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 50px;
height: 50px;
background-color: deepskyblue;
position: absolute;
border: 2px solid #656565;
}
</style>
<script src="js/Method.js"></script>
</head>
<body>
<div></div>
<script>
var elem;
var state=0;//当前的状态 初始0——拖动录制1——回放2
var arr=[];//存放我们的行走路径的 数组
var list=[];//存放我们的行走路径的 数组
var index=0;
init();
function init() {
elem=document.querySelector("div");
Method.dragElem(elem);
elem.addEventListener("mousedown",mouseHandler);
elem.addEventListener("mouseup",mouseHandler);
setInterval(animation,16);
}
function mouseHandler(e) {//当前的状态 初始0——拖动录制1——回放2
if(e.type==="mousedown"){//鼠标按下
state=1;
}else if(e.type==="mouseup"){//鼠标抬起
createElemShadow();
state=2;
}
}
function createElemShadow() {
var bool=false;
if(list.length===0) bool=true;
for(var i=0;i<5;i++){
if(bool)list.push(elem.cloneNode(false));
list[i].style.opacity=1-i*0.2;
document.body.appendChild(list[i])
}
}
function animation() {
if(!state) return;
if(state===1){
record();
}else if(state===2){
play();
}
}
function record() {
var rect=elem.getBoundingClientRect();
arr.push({x:rect.x,y:rect.y});
}
function play() {
/* if(index>=arr.length-1){
state=0;
return;
}*/
index++;
var point=arr[index];
if(point){
elem.style.left=point.x+"px";
elem.style.top=point.y+"px";
elem.style.backgroundColor=Method.divColor();
}
var bool=false;
for(var i=0;i<list.length;i++){
if(!arr[index-i*2]) continue;
list[i].style.left=arr[index-i*2].x+"px";
list[i].style.top=arr[index-i*2].y+"px";
list[i].style.backgroundColor=Method.divColor();
bool=true;
}
if(!bool){
state=0;
for(var j=0;j<list.length;j++){
list[j].remove();
}
}
}
</script>
</body>
</html>以上是本文的全部内容，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站。