Está devolviendo nulo cuando el elemento createElement se coloca en su contenedor. Pero los otros elementos que están en mis archivos html se arrastran correctamente, excepto los elementos creados con javascript.

 window.addEventListener("load", ()=>{ const Element = document.querySelectorAll( "#Data" ) const Drop = document.querySelectorAll( "#Drop" ) const AddBug = document.getElementById( "AddBug" ) let DraggedItem = null AddBug.addEventListener("click", ()=>{ const BugInput = document.getElementById("BugInput").value const Wrapper = document.getElementById("Wrapper") const NewDiv = document.createElement("span") NewDiv.classList.add("Data") NewDiv.setAttribute("id", "Data") NewDiv.setAttribute("draggable", "true") NewDiv.innerText = BugInput Wrapper.append(NewDiv) }) for( let i=0; i<Element.length; i++ ){ const Item = Element[i] Item.addEventListener("dragstart", () =>{ console.log("DragStart") DraggedItem = Item console.log(DraggedItem) setTimeout(()=>{ Item.style.display = "none" },0) }) Item.addEventListener("dragend", ()=>{ console.log("dragend") setTimeout(()=>{ DraggedItem.style.display = "block" DraggedItem = null },0) }) for ( let j=0; j<Drop.length; j++ ){ const list = Drop[j] list.addEventListener( "dragover", ( e )=>{ e.preventDefault() }) list.addEventListener( "dragenter", ( e )=>{ e.preventDefault() }) list.addEventListener( "drop", ()=>{ list.append(DraggedItem) }) } } })