Javascript元素转换和生命周期

已删除的内容，该内容妨碍了其他人进行家庭作业的尝试。

您的主要问题是试图用transform重置左上角

// use left and top:

draggable.style.left = pX + "px";
draggable.style.top = pY + "px";
  // reset:
draggable.style.left = 0 + "px";
draggable.style.top= 0 + "px";

// or use transform:

draggable.style.transform = "translate("+pX+"px, "+pY+"px)";
  // reset:
draggable.style.transform = "translate(0px, 0px)";

我还将事件侦听器从函数中移出，因为您实际上不需要删除它们

let isDraging=false；
常数deltaToCenter={
x:0,，
y:0
};
常量拖动位置={
x:0,，
y:0
};
常量屏幕中心位置={
x:0,，
y:0
};
const draggable=document.querySelector（'.draggable'）；
常量markerX=document.querySelector（'.center-x-marker'）；
常量markerY=document.querySelector（'.center-y-marker'）；
让{
宽度
身高
}=draggable.getBoundingClientRect（）；
常数拖动中心={
x：宽度/2，
y:高度/2
};
addEventListener（'mousedown'，initDrag）；
文件。添加文件列表器（“鼠标移动”，把手）；
文件。添加的文件列表器（'mouseup'，stopDrag）；
draggable.addEventListener（'transitionend'，onTransitionEnd）；
函数initDrag（事件）{
IsDraging=true；
dragPosition.x=event.pageX；
dragPosition.y=event.pageY；
screenCenterPosition.x=parseInt（document.body.offsetWidth/2）；
screenCenterPosition.y=parseInt（document.body.offsetHeight/2）；
}
功能手柄（事件）{
if（ISDRAGING）{
设pX=event.pageX；
设pY=event.pageY；
draggable.style.transform='translate（'+pX+'pX'，+pY+'pX'）；
设dragObj=draggable.getBoundingClientRect（）；
if（dragObj.top==145&&dragObj.bottom==295）{
markerX.classList.add（'visible'）；
markerY.classList.add（'visible'）；
}
}
}
函数stopDrag（）{
IsDraging=错误；
draggable.classList.add（'animate'）；
draggable.style.transform='translate（0px，0px）'；
}
函数onTransitionEnd（）{
draggable.classList.remove（'animate'）；
隐藏标记（）；
}
函数hideMarkers（）{
markerX.classList.remove（'visible'）；
markerY.classList.remove（'visible'）；
}
addEventListener（'mousedown'，initDrag）；
draggable.addEventListener（'transitionend'，onTransitionEnd）；
文件。添加的文件列表器（'mouseup'，stopDrag）；
文件。添加文件列表器（“鼠标移动”，把手）
html，
身体{
身高：100%；
保证金：0；
溢出：隐藏；
}
.拖拉{
位置：绝对位置；
左：0；
排名：0；
z指数：1；
宽度：150px；
高度：150像素；
光标：抓取；
}
.可拖动的内部{
宽度：100%；
身高：50%；
}
.draggable-inner.top{
背景：#1ADECB；
}
.draggable-inner.bottom{
背景：#1A8FDE；
}
.draggable.animate{
转换：500毫秒转换容易；
}
.马克{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
z指数：0；
}
.马克{
背景：黄色；
不透明度：0.2；
过渡时间：500ms；
位置：绝对位置；
}
.marker.可见{
背景：#1同上91；
不透明度：1；
}
.中心x标记{
宽度：10px；
身高：100%；
}
.中心y标记{
宽度：100%；
高度：10px；
}

你能重新表述一下你的作业目标吗？我不明白你想要达到的目的。当然，现在重新措辞。非常感谢拉斐尔！据我所知，当我需要转换时，我错过了这个部分。可以通过我拖动的px拖动吗？