拖放纯Javascript-教程

Question

我正在创建一个待办事项列表，我试图在不使用Jquery的情况下包括可排序的拖放操作，但是我之前从未使用过拖放操作，我还使用javascript在列表中创建了createElement等，我的HTML ul部分仅包含：，如果有一种简单且ES6 +（不必要）的方法来解决此问题，我完全可以理解。

const inputTarefa = document.querySelector('#tarefa'                  
const addButton = document.querySelector('#button');

addButton.addEventListener('click', function newElement() {
const li = document.createElement('li');
li.id = "#tarefas";
li.value = "tarefas";
const inputTarefa = document.querySelector('#tarefa').value;
const tarefa = document.createTextNode(inputTarefa);
li.appendChild(tarefa);

// Criar Checkbox

const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = "value";
checkbox.id = "checkbox"
li.appendChild(checkbox);

// Checked

checkbox.addEventListener('change', function OnChangeCheckbox(event) {
    const checkbox = event.target;
    if (checkbox.checked) {
        li.style.textDecoration = 'line-through';
    }
    else {
        li.style.textDecoration = 'none';
    }
});

// Criar Botão de Fechar

const button = document.createElement('button');
button.type = "reset";
button.id = "close";
button.class = "btnfinal"
texto = document.createTextNode('X');
button.appendChild(texto);
li.appendChild(button);

//  Função fechar
button.addEventListener('click', function () {
    const ul = li.parentNode;
    ul.removeChild(li);
});

if (inputTarefa === '') {
    alert('Ops write something!')

} else {
    document.querySelector('#lista').appendChild(li);
}

// drag and drop 


});