Javascript 将元素拖放到第二个ul中，使其为null

我通过提交的表单创建此元素。然后，一旦创建了这个元素，我希望它具有与我最初拥有的占位符值相同的拖放功能。但由于某种原因，一旦拖动该项，该项随后在移动到第二个ul时变为“null”。不确定如何确保拖动的项保留其所有数据，或者在其移动后在前端和dom中保持不变

var foodItems=document.querySelectorAll（'.food_item'）；
const foodList=document.querySelectorAll（'.food_list'）；
const form=document.querySelector（'form'）；
const ul=document.querySelector（'ul'）；
const clearBtn=document.querySelector（'.clear_btn'）；
const formInput=document.querySelector（'.form_control'）；
const feedback=document.querySelector（'.feedback'）；
const danger=document.querySelector（'.danger'）；
const success=document.querySelector（'.success'）；
const input=document.getElementById（'input'）；
const checkBtns=document.queryselectoral（“.fa check circle”）；
const deleteBtns=document.querySelectorAll（'.fa edit'）；
const data=JSON.parse（localStorage.getItem（'foods'）；
//加载本地存储
var-foodsArray；
if（localStorage.getItem（'foods'））{
foodsArray=JSON.parse（localStorage.getItem（'foods'））
}否则{
foodsArray=[]；
}
forEach（div=>{
利马客（分区）
});
//创建li项目
函数liMaker（文本）{
const div=document.createElement（'div'）；
div.textContent=文本；
div.classList.add（'food_item'）；
var child1=document.createElement（'span'）；
child1.className='far fa check circle'；
child1.addEventListener（'click'，checkBtnHandler）；
儿童组（儿童1）；
var child2=document.createElement（'span'）；
child2.className='far fa edit'；
child2.addEventListener（'click'，deleteBtnHandler）；
儿童组（儿童2）；
document.querySelector（“.food_list”）.append（div）；
}
表.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
常量值=document.getElementById（'input'）。值；
如果（值=“”）{
document.querySelector（'.success'）.style.display='none'；
document.querySelector（'.danger'）.style.display='block'；
setTimeout（函数（）{
document.querySelector（'.danger'）.style.display='none'；
}, 2000)
}否则{
document.querySelector（'.danger'）.style.display='none'；
document.querySelector（'.success'）.style.display='block'；
foodsArray.push（input.value）
localStorage.setItem（'foods'，JSON.stringify（foodsArray））
liMaker（输入值）；
input.value=''；
setTimeout（函数（）{
document.querySelector（'.success'）.style.display='none'；
}, 2000)
}
})
//清除btn功能
clearBtn.addEventListener（'click'，function（）{
localStorage.clear（）
item=document.querySelector（“.food_list”）；
while（第一个孩子）{
item.removeChild（item.firstChild）
}
})
//删除btn功能
函数deleteBtnHandler（e）{
const div=e.currentTarget.parentNode；
var index=[].indexOf.call（div.parentNode.children，div）
foodsArray.拼接（索引1）；
setItem（'foods'，JSON.stringify（foodsArray））；
div.parentNode.removeChild（div）；
}
功能检查BtnHandler（e）{
const underline=e.currentTarget.parentNode；
下划线.classList.toggle（'completed'）；
}
//按钮事件侦听器功能
deleteBtns.forEach（函数（btn）{
btn.addEventListener（'click'，deleteBtnHandler）；
});
checkBtns.forEach（函数（btn）{
btn.addEventListener（'click'，checkBtnHandler）；
});
//拖放功能
设draggedItem=null；
forEach（函数（e，i）{
常量项=列表项[i]；
item.addEventListener（'dragstart'，函数（e）{
e、 dataTransfer.effectAllowed='move'；
e、 dataTransfer.setData（'text'，item.innerHTML）；
draggedItem=项目；
setTimeout（函数（）{
item.style.display='none'；
}, 0)
});
item.addEventListener（'dragend'，function（）{
setTimeout（函数（）{
draggedItem.style.display='block'；
draggedItem=null；
}, 0);
});
});
forEach（函数（列表）{
list.addEventListener（'dragover'，函数（e）{
e、 预防默认值（）；
});
list.addEventListener（'dragenter'，函数（e）{
e、 预防默认值（）；
this.style.backgroundColor='rgba（0,0,0,0.2）'；
});
list.addEventListener（'dragleave'，函数（e）{
this.style.backgroundColor='rgba（0,0,0,0.1）'；
})
list.addEventListener（'drop'，函数（e）{
列表。追加（draggedItem）；
this.style.backgroundColor='rgba（0,0,0,0.1）'；
});
})

添加项


清除所有

我不能给你一个直截了当的答案，但我可以帮助你开始修复一些小东西，这些小东西应该能解开一些谜团。因此，首先，当您尝试将EventListener绑定到项目时，所有html集合foodItems都是空的。这些项是在querySelector运行后创建的。最佳做法是在创建时将事件侦听器绑定到项目，例如