Javascript 如何拖动和变换长方体？

我正在创建一个框，可以沿页面的X轴拖动它。我想把它拖放到任何地方。但是，代码不起作用，因为

e.clientX

值在新的单击后会自动重置。因此，我可以拖动它，但当我再次拖动它时，它会自动转到中间

const-box=document.querySelector（'.box'）；
框。addEventListener（'dragstart'，dragstart）；
框。添加的列表器（“拖动”，把手）；
框。添加的列表（“dragend”，dragend）；
设startX=0；
函数dragStart（e）{
startX=e.clientX；
控制台日志（startX）；
}
功能手柄（e）{
常数currentX=e.clientX；
box.style.transform='translateX（+（currentX-startX）+'px'）；
}
函数dragEnd（e）{
box.style.transform='translateX（+（e.clientX-startX）+'px'）；
}

.container{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.盒子{
宽度：250px；
高度：250px；
背景色：番茄；
}

---

好的，我认为解决方案就在那里：

我所做的是向框中添加一个属性（如果只有一个框，则可以声明一个全局变量），该属性存储框的当前位置

const-box=document.querySelector（'.box'）；
框。addEventListener（'dragstart'，dragstart）；
框。添加的列表器（“拖动”，把手）；
框。添加的列表（“dragend”，dragend）；
box.currentTransform=0；//加上这个
设startX=0；
函数dragStart（e）{
startX=e.clientX；
控制台日志（startX）；
}
功能手柄（e）{
常数currentX=e.clientX；
box.style.transform='translateX（'+
（box.currentTransform+currentX-startX）+//更改了
"px";；
}
函数dragEnd（e）{
box.currentTransform+=e.clientX-startX//添加了
box.style.transform='translateX（+（box.currentTransform）+'px）；//更改了此值
}

.container{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.盒子{
宽度：250px；
高度：250px；
背景色：番茄；
}

---

谢谢，这确实有效！什么是电流变换？我没有在变量中看到它