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? *
