使用JavaScript拖动元素（转换位置CSS3）

我正在处理一个小任务，在这个任务中，我必须将

（translate）

元素自由拖动到文档中的任何位置。我已经完成了基本的工作，但对鼠标的当前位置感到困惑。因为当我开始拖动元素时，鼠标位置不在发生

mousedown

的位置

简单地说，我希望鼠标的位置保持在我单击框的位置

---

这是链接。

您需要计算元素的宽度和高度，以便将光标保持在其中心，请注意，现在它正在处理任何宽度和高度值，这里我添加了一个动画，只是调整宽度和高度的大小，以确保始终获得元素的中心

let target=document.querySelector（“.drag”）；
函数onDrag（e）{
//我们可以让它们成为全局变量
const{width，height}=window.getComputedStyle（目标）；
target.style.transform=`translate（${e.clientX-+width.replace（“px”，“”）/2}px，${e.clientY-+height.replace（“px”，“”）/2}px）`；
}
函数onLetGo（）{
文档。删除EventListener（'mousemove'，onDrag）；
文档。删除EventListener（'mouseup'，onLetGo）；
}
函数onGrab（）{
文件。添加的文件列表器（“mousemove”，onDrag）；
文件。添加的文件列表器（'mouseup'，onLetGo）；
}
target.addEventListener（'mousedown'，onGrab）
*{
框大小：边框框；
}
.拖{
宽度：100px；
高度：100px；
边框：1px纯黑；
背景：蓝色；
光标：指针；
位置：固定；
动画名称：调整大小；
动画持续时间：4s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧调整大小{
0%{宽度：100px}
25%{高度：150px}
50%{宽度：150px}
100%{高度：100px}
}
谢谢你的回答，它很好用。有没有办法，我们可以从单击div的任何位置拖动div？