Перетаскивание Javascript одним элементом

В настоящее время я изучаю JavaScript и создал код, позволяющий пользователю перетаскивать элемент. Однако этот код требует, чтобы в списке объектов было два объекта, тогда как я хочу, чтобы был только один. Я считаю, что проблема связана с использованием циклов for, которые начинаются с 0 и требуют, чтобы длина списка элементов была больше 0. Но из-за списков, начинающихся с индекса 0, этого не происходит. Мой код:

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

let draggedItem = null;

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

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

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

for (let j = 0; j < lists.length; j ++) {
    const list = lists[j];

    list.addEventListener('dragover', function (e) {
        e.preventDefault();
    });

    list.addEventListener('dragenter', function (e) {
        e.preventDefault();
    });


    list.addEventListener('drop', function (e) {
        console.log('drop');
        this.append(draggedItem);
    });
   }
}