null after drop:javascript

Question

after i add 2-3 times and drop it in other place, on my item come null here is my code .i can't understand where is my mistake is there any mistake that i can fix...or maybe i forgot to add ... can you pls say what is wrong ? its my first time use Drag&Drop so i'm a little bit confused

http://jsfiddle.net/adulik/8sqbcox2/15/

    function updateStyle() {

//get lise and list-item

  const list_items = document.querySelectorAll('.list-item');
  const lists = document.querySelectorAll('.list');

//circle fot list item and getting them

  let draggedItem = null;
  for (let i = 0; i < list_items.length; i++) {
    const item = list_items[i];

//start draggable items

    item.addEventListener('dragstart', function () {
      // console.log("dragstart")
      draggedItem = item;
      setTimeout(function () {
        item.style.display = 'none';
      }, 0);
    });

//finish draggable item

    item.addEventListener('dragend', function () {
      // console.log("dragend")
      setTimeout(function () {
        draggedItem.style.display = 'block';
        draggedItem = null;
      }, 0);
    });

//list of items

    for (let j = 0; j < lists.length; j++) {
      const list = lists[j];
      // console.log('list ', list);
      //take item and drag over (new element inside block )
      list.addEventListener('dragover', function (event) {
        event.preventDefault();
      });

//enter the zone of draggable item

      list.addEventListener('dragenter', function (event) {
        event.preventDefault();
        this.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
      });

//leave the zone and "delete" color

      list.addEventListener('dragleave', function (event) {
        this.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
      });

 //drop in the zone

      list.addEventListener('drop', function (event) {

//set  background color in drop zone

        this.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
        this.append(draggedItem);
      });
    }
  }
}

//creating the list

function createList(event) {
  event.preventDefault();

 //get title text

  const titleText = document.getElementById('titleText');
  console.log('titleText', titleText);

//if input is empty alert ....if not

  if (titleText.value.length === 0) {
    alert('dask cannot be empty, please add a title');
    return;
  }


//creating and append the element

  const lists = document.getElementById('lists');
  const list = createElement('div', '', 'list');
  const title = createElement('h3', titleText.value, 'list-title');
  const id = `task-${titleText.value}-list`;
  list.id = id;
  list.append(title);
  lists.append(list);
  const taskInput = createTaskInput(titleText.value);
  list.append(taskInput);
  titleText.value = '';
  updateStyle();
}

//create Element

function createElement(tag, text, className = null) {
  const element = document.createElement(tag);
  console.log('element', element);

 //if we have name then we add classList and return element

  if (className) {
    console.log('className', className);
    element.classList.add(className);
  }
  if (text && text.length > 0) {
    const textNode = document.createTextNode(text);
    element.appendChild(textNode);
  }
  return element;
}

//create new Task Input and append input and button

function createTaskInput(listName) {
  const form = createElement('form', '', 'task-form');
  const input = createElement('input', '');
  const button = createElement('button', '');
  const id = `task-${listName}`;
  input.name = 'task';
  input.id = id;
  button.innerText = 'Add';
  button.addEventListener('click', function (event) {
    event.preventDefault();
    addTaskListItem(id);
  });
  form.append(input);
  form.append(button);
  return form;
}

//add task list item

function addTaskListItem(id) {

  //get element by id

  const task = document.getElementById(id);

  //creating new task in block

  console.log('task ', task);
  if (task.value.length === 0) {
    alert('Cannot be empty');
    return;
  }
  const list = document.getElementById(`${id}-list`);
  const listItem = createElement('div', task.value, 'list-item');
  listItem.setAttribute('draggable', true);
  task.value = '';
  list.append(listItem);
  updateStyle();
}

*here you can explain me why so? *

Answer 1

i found my mistake )) in setTimeout ...here in "dragend" i was adding

draggedItem = null;

it was my mistake ))

//finish draggable item 

item.addEventListener('dragend', function () {
  // console.log("dragend")
  setTimeout(function () {
    draggedItem.style.display = 'block';
    draggedItem = null;
  }, 0);
});