I am facing an issue where my item becomes null after being dragged 2-3 times and dropped in a different place. I have included my code below and I can't seem to figure out where the mistake lies. Can you please review it and let me know what needs to be fixed? This is my first time using Drag & Drop functionality, so I might be missing something.
function updateStyle() {
//get list items and lists
const list_items = document.querySelectorAll('.list-item');
const lists = document.querySelectorAll('.list');
//iterate through list items
let draggedItem = null;
for (let i = 0; i < list_items.length; i++) {
const item = list_items[i];
//make items draggable
item.addEventListener('dragstart', function () {
// console.log("dragstart")
draggedItem = item;
setTimeout(function () {
item.style.display = 'none';
}, 0);
});
//end dragging item
item.addEventListener('dragend', function () {
// console.log("dragend")
setTimeout(function () {
draggedItem.style.display = 'block';
draggedItem = null;
}, 0);
});
//loop through lists
for (let j = 0; j < lists.length; j++) {
const list = lists[j];
// console.log('list ', list);
//allow item to be dragged over
list.addEventListener('dragover', function (event) {
event.preventDefault();
});
//when entering draggable zone
list.addEventListener('dragenter', function (event) {
event.preventDefault();
this.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
});
//leave the zone and remove color
list.addEventListener('dragleave', function (event) {
this.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
});
//dropping 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);
});
}
}
}
//create a new 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('task cannot be empty, please add a title');
return;
}
//creating and appending 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);
//add classList if classname exists
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();
}
*Feel free to provide feedback on any potential issues*