I'm new in JavaScript and currently learning. I want to be able to move the list items between the different to do lists but the thing is it has to be written in native JavaScript. Right now I can only move the items from the first list and only the checked one. Here is my drag and drop code. codepen
let list = document.querySelector('.mylist');
let draggedItem;
function isLiItem(event) {
return event.target && event.target.classList.contains("checked");
}
function onDragStart(event) {
if (isLiItem(event)) {
event.target.classList.add('on-drag-start');
draggedItem = event.target;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', event.target.innerHTML);
}
}
function onDragEnter(event) {
if (isLiItem(event)) {
event.target.classList.add('on-drag-enter');
}
}
function onDragLeave(event) {
if (isLiItem(event)) {
event.stopPropagation();
event.target.classList.remove('on-drag-enter');
}
}
function onDragOver(event) {
if (isLiItem(event)) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}
}
function onDragDrop(event) {
if (isLiItem(event)) {
list.insertBefore(draggedItem, event.target);
draggedItem.classList.remove('on-drag-start');
event.target.classList.remove('on-drag-start');
}
}
function onDragEnd(event) {
let allItems = list.querySelectorAll('.mylist .checked .unchecked');
allItems.forEach((item) => item.classList.remove('on-drag-enter'));
event.target.classList.remove('on-drag-start');
}
list.addEventListener('dragstart', onDragStart);
list.addEventListener('dragover', onDragOver);
list.addEventListener('dragenter', onDragEnter);
list.addEventListener('dragleave', onDragLeave);
list.addEventListener('drop', onDragDrop);
list.addEventListener('dragend', onDragEnd);<div id="tasks">
<details>
<summary>Tasks</summary>
<form class="additem" onsubmit="addItem(this); return false;">
<input type="text" placeholder="Enter new task">
<input type="submit" value="Add New Task">
</form>
<ul class="mylist" id="tasks_list">
</ul>
</details>
</div>