Javascript 拖动'；n'；drop：当我单击元素时，该元素未停留在其原始位置

我正在为我的一个项目编写自己的拖放功能，我遇到了一个问题。我所有的“可拖动”元素都在一个容器中，容器带有

display:flex

。在其中一个元素上的鼠标向下事件中，我将

位置设置为
绝对值
，以便在拖动时能够设置元素的
左侧
和
顶部
属性。以下是我正在做的：


let container=document.querySelector（“大容器”）
var=false；
var draggedObject；
设shiftX=0；
设shiftY=0；
document.queryselectoral（“.draggable”）.forEach（（draggable，index）=>{
draggable.style.order=索引；
draggable.draggable=false；
draggable.ondragstart=（）=>{return false}
Dragable.addEventListener（“鼠标向下”，ev=>{
draggedObject=可拖动；
shiftX=电动偏置x+5；
换档=电动偏置+5；
draggable.style.position=“绝对”；
draggable.style.left=（ev.clientX-shiftX）+“px”；
draggable.style.top=（ev.clientY-shiftY）+“px”；
拖动=真；
让占位符=document.createElement（“div”）；
placeholder.id=“placeholder”；
占位符.style.order=draggable.style.order；
container.appendChild（占位符）；
})
})
document.addEventListener（“mousemove”，ev=>{
如果（拖动）{
draggedObject.style.left=ev.clientX-shiftX+'px'；
draggedObject.style.top=ev.clientY-shiftY+'px'；
}
})
document.addEventListener（“mouseup”，ev=>{
如果（拖动）{
draggedObject.style.position='static'
让占位符=document.querySelector（“占位符”）；
container.removeChild（占位符）；
拖动=错误
}
})
/*有：not（：last of type（div））这样控制台就不会受到影响*/
*{
保证金：0；
填充：0；
框大小：边框框；
背景色：黑色；
}
.拖拉{
宽度：90px；
高度：120px；
保证金：5px；
}
#占位符{
宽度：90px；
高度：120px；
保证金：5px；
背景色：rgba（0,0,0,0.3）；
边框：灰色虚线5px；
}
您可以使用
getBoundingClientRect（）
获取实际位置


let container=document.querySelector（“大容器”）；
var=false；
var draggedObject；
设shiftX=0；
设shiftY=0；
document.queryselectoral（“.draggable”）.forEach（（draggable，index）=>{
draggable.style.order=索引；
draggable.draggable=false；
draggable.ondragstart=（）=>{
返回false；
};
Dragable.addEventListener（“鼠标向下”，ev）=>{
draggedObject=可拖动；
var x=draggable.getBoundingClientRect（）.top-5；
var y=draggable.getBoundingClientRect（）.left-5；
shiftX=电动汽车偏移量x+5；
换档=电动偏置+5；
draggable.style.position=“绝对”；
draggable.style.left=y+“px”；
draggable.style.top=x+“px”；
拖动=真；
让占位符=document.createElement（“div”）；
placeholder.id=“placeholder”；
占位符.style.order=draggable.style.order；
container.appendChild（占位符）；
});
});
document.addEventListener（“mousemove”，（ev）=>{
如果（拖动）{
draggedObject.style.left=ev.clientX-shiftX+“px”；
draggedObject.style.top=ev.clientY-shiftY+px；
}
});
文件。添加的文件列表（“鼠标”，ev）=>{
如果（拖动）{
draggedObject.style.position=“静态”；
让占位符=document.querySelector（“占位符”）；
container.removeChild（占位符）；
拖动=假；
}
});
*{
保证金：0；
填充：0；
框大小：边框框；
背景色：黑色；
}
#大容器{
宽度：500px；
高度：500px；
}
.拖拉{
宽度：90px；
高度：120px；
保证金：5px；
}
#占位符{
宽度：90px；
高度：120px；
保证金：5px；
背景色：rgba（0,0,0,0.3）；
边框：灰色虚线5px；
}