Javascript 拖放div异常行为

我正在尝试制作一个多

div

拖放，可以动态添加更多

div

或删除一些

在第一次运行时，它工作得很好，但是如果我尝试再次运行该函数，它的行为会很奇怪

• 它通过在任何位置拖动来移动，而不是像以前那样仅在标题中拖动
• 所有动作都转到最后一节
• 无法再在文本区域中书写

var applyDrag=（）=>{
Array.prototype.slice.call（document.queryselectoral（“.contentCon”））.forEach（e=>{
e、 querySelector（“h1”）.onmousedown=null；
排水管（e）；
log（例如querySelector（“h1”）.innerText）；
});
}
applyDrag（）；
var moveRoom=document.querySelector（“.mainCon”）；
功能牵引装置（elmnt）{
elmnt.style.background=“蓝色”；
var dragEl=elmnt.querySelector（“h1”）；
dragEl.style.cursor=“移动”；
log（dragEl.innerText）；
变量pos1=0，pos2=0，pos3=0，pos4=0；
如果（移动室）{
moveRoom.onmousedown=拖动鼠标向下；
}否则{
dragEl.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
控制台日志（dragEl）；
e=e | | window.event；
e、 预防默认值（）；
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
document.onmouseup=null；
document.onmousemove=null；
}
}

主块
提交


单击“提交”按钮再次运行拖放功能。
未应用内部代码。
退出日志


未应用内部代码。

请在DrageElement功能中替换这些行

if (moveRoom) {
    moveRoom.onmousedown = dragMouseDown;
}
else {
    dragEl.onmousedown = dragMouseDown;
}

就这么办吧

dragEl.onmousedown=dragMouseDown

它在第一次运行时起作用，因为在第一次调用moveRoom时，当else part run和onmousedown函数正确分配给dragEl时，moveRoom为空，但在第二次运行时，它不是空的，onmousedown函数分配给moveRoom元素。
您的代码和解释非常混乱。在“再次运行函数”中，您指的是哪个函数
applyDrag
似乎不是为多次运行而设计的。代码是新样式（
querySelector
）和旧样式（
e | | window.event
和使用
on…
属性而不是
addEventListener
）的奇怪混合体。还有一个现代的拖放API：