将`n`拖放到待办事项列表中

Question

我尝试对我的待办事项列表使用拖放。但是我有一些问题。当我使用诸如div或li之类的简单元素列表时，我得到了。但是，当我尝试使用待办事项列表执行此操作时。我的元素不动。为什么？ P.s.我刚刚开始学习js。

下面，我添加了难看的代码。

var task = [];
function newElement(newChild) {
    let btnDel= document.createElement("button");
    btnDel.className = "fa fa-trash-o";
    let myEd = document.getElementById("myEdit");
    let spanClose1 = document.getElementsByClassName("close1")[0];
    let spanRedact = document.getElementsByClassName("redact")[0];
    let myDel = document.getElementById("myDelete");
    let spanClose = document.getElementsByClassName("close")[0];
    let spanYes = document.getElementsByClassName("yes")[0];
    //create button
    let divWithBut = document.createElement("div");
    divWithBut.className = "forButt";
    let btnRedact = document.createElement("button");
    btnRedact.className = "fa fa-pencil";
    //redact but
    btnRedact.onclick = function(){
        myEd.style.display = "block";
        let editText = document.getElementById("editText");
        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
        editText.value = divWithText.innerHTML;
        editText.currentTarget;
        spanRedact.onclick = function(){
            divWithText.textContent = editText.value;
            divWithText.className = "todoPost";
            myEd.style.display = "none";
        };
        spanClose1.onclick = function() {
            myEd.style.display = "none";
        };
    }
    /*************************** */

    /*done but*/
    let doneBut = document.createElement("button");
    doneBut.className = "fa fa-check-circle-o";
    doneBut.onclick = function(){
        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];
        divWithText.classList.toggle("checked");
    }

    /******************* */

    divWithBut.appendChild(btnRedact);
    divWithBut.appendChild(doneBut);
    divWithBut.appendChild(btnDel);
    /******************/

//for index
    let indexDiv = document.createElement("div");
    indexDiv.className = "indexDiv";
    let numbInd = 1;
    indexDiv.innerHTML = numbInd;
    /*********************************** */
        //create arrow
    let divWithArrow = document.createElement("div");
    divWithArrow.className = "myArrow";
    let arrowUP = document.createElement("i");
    arrowUP.className = "fa fa-chevron-up";
    let arrowDown = document.createElement("i");
    arrowDown.className = "fa fa-chevron-down";
    divWithArrow.appendChild(arrowUP);
    divWithArrow.appendChild(arrowDown);

    //for date
    let date = new Date();
    let curr_date = date.getDate();
    let curr_month = date.getMonth()+1;//+1 бо почина з 0 і випада місяць на 1 менше
    let curr_year = date.getFullYear();
    let curr_hour = date.getHours();
    let curr_minutes = date.getMinutes();
    let d = (curr_date + "." + curr_month + "." + curr_year+"<br>"+curr_hour+":"+curr_minutes);
    let divTime = document.createElement("div");
    divTime.style.textAlign = "center";;
    divTime.innerHTML = d;
    //***************************/

    let div1 = document.createElement("div");
    div1.className = "timeComent";
    let myli = document.createElement("li");
    myli.className = "todoPost";
    let addField = document.getElementById("addField").value;
    task = document.createTextNode(addField);
    myli.appendChild(task);
    div1.appendChild(divTime);
    div1.appendChild(indexDiv);
    div1.appendChild(divWithArrow);
    div1.appendChild(myli);
    divWithBut.style.display = "flex";
    div1.appendChild(divWithBut);

    if (addField === '') {
        alert("You must write something!");
    } else {

        task = document.getElementById("forToDo").appendChild(div1);
        //task = document.getElementById("forToDo").insertBefore(div1,null);
    }
    document.getElementById("addField").value = "";


    //Drag`n`Drop

    var move = document.querySelector("timeComent");

    function dragStart(e) {
        this.style.opacity = "0.4";
        dragSrcEl = this;
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/html", this.innerHTML);
    }

    function dragEnter(e) {
        this.classList.add("over");
    }

    function dragLeave(e) {
        e.stopPropagation();
        this.classList.move("over");
    }

    function dragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        return false;
    }

    function dragDrop(e) {
        if (dragSrcEl !== this) {
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData("text/html");
        }
        return false;
    }

    function dragEnd(e) {
        var listItens = document.querySelector("timeComent");
        [].forEach.call(listItens, function(item) {
            item.classList.move("over");
        });
        this.style.opacity = "1";
    }

    function addEventsDragAndDrop(el) {
        el.addEventListener("dragstart", dragStart, false);
        el.addEventListener("dragenter", dragEnter, false);
        el.addEventListener("dragover", dragOver, false);
        el.addEventListener("dragleave", dragLeave, false);
        el.addEventListener("drop", dragDrop, false);
        el.addEventListener("dragend", dragEnd, false);
    }

    var listItens = document.getElementsByClassName("timeComent");
    [].forEach.call(listItens, function(item) {
        addEventsDragAndDrop(item);
    });



//************************************************/


    //delete but
    btnDel.onclick = function(){
        myDel.style.display = "block";
        spanClose.onclick = function() {
            myDel.style.display = "none";
        };
        spanYes.onclick = function() {
            myDel.style.display = "none";
            div1.remove();
        };
    }

    //move elements with arrow help
     arrowUP.onclick = function(){
         numbInd++;
         indexDiv.innerHTML = numbInd;
         //if I not mistake, insertAfter must be here...
         let divs = document.querySelectorAll('.indexDiv');// get all the index divs
         let arr = [];// store the value of indexes in an array
         for (var i = 0; i < divs.length; i++) {// for every .indexDiv
             arr.push(Number(divs[i].innerHTML))// push the index of the div into the array
         }
         let maxindex = Math.max.apply(null, arr); // now get the maximum value from array


         var aTags = document.querySelectorAll('.indexDiv');// for every div again.
         var found;
         for (var i = 0; i < aTags.length; i++) {// for every div again.
             if (aTags[i].textContent == maxindex) {// check the index and get that div with max index
                 found = aTags[i];
                 break;
             }
         }
         if (aTags.length > 1) {// check if the number of div's are more than 1.
             document.getElementById("forToDo").appendChild(found.parentElement);
         }
     };

     arrowDown.onclick = function(){
         numbInd--;
         indexDiv.innerHTML = numbInd;
         let divs = document.querySelectorAll('.indexDiv');
         let arr = [];
         for (var i = 0; i < divs.length; i++) {
             arr.push(Number(divs[i].innerHTML))
         }
         let minindex = Math.min.apply(null, arr);

         var aTags = document.querySelectorAll('.indexDiv');
         var found2;
         for (var i = 0; i < aTags.length; i++) {
             if (aTags[i].textContent == minindex) {
                 found2 = aTags[i];
                 break;
             }
         }
         if (aTags.length > 1) {

             document.getElementById("forToDo").insertBefore(found2.parentElement, document.getElementById("forToDo").firstChild);

         }

     };



}

*{
    margin: 0;
    padding: 0;
}
header{

    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
}
.firstBar{
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
}
.indexDiv{
    font-style: normal;
    text-align: center;
    color: #fff;
    width: 15px;
    height: 20px;
    margin: 10px;
    background-color: #888;
}
.fafaArrow{
    font-size: 24px;
    color: #000;
}
.timeComent{
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;
    will-change: transform;
    transition: all 200ms;
    user-select: none;
}
.timeComent:after {
    content: 'drag me';
    right: 7px;
    font-size: 10px;
    position: absolute;
    cursor: pointer;
    line-height: 5;
    transition: all 200ms;
    transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.50);
    transform: translateX(120%);
    opacity: 0;
}

.numberpost{
    padding: 5px;
    color: rgb(255, 255, 255);
    background: rgb(141, 112, 112);
}
.todoPost{
    background-color: #eee;
    width: 50%;
    margin: 5px;
    overflow: auto;
    text-align: justify;
}
.shadow {
    background: rgba(102, 102, 102, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.window {
    width: 300px;
    height: 50px;
    text-align: center;
    padding: 15px;
    border: 3px solid #0000cc;
    border-radius: 10px;
    color: #0000cc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #fff;
}
.shadow:target {display: block;}


.redact {
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.redact:hover {
    background-color: #68f462;
    color: white;}
.close{
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.close:hover{
    background-color: #f44336;
    color: white;
}
/* Style the close button */
.close3 {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.yes {
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.yes:hover{
    background-color: #68f462;
    color: white;
}

.close1{
    display: inline-block;
    border: 1px solid #0000cc;
    color: #0000cc;
    margin: 10px;
    text-decoration: none;
    background: #f2f2f2;
    font-size: 14pt;
    cursor:pointer;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.close1:hover{
    background-color: #f44336;
    color: white;
}

/* When clicked on, add a background color and strike out text */
div li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
div li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}


/******************************/

.over {
    transform: scale(1.1, 1.1);
}

<!DOCTYPE html>
<html>
<head>
    <title>TO DO List</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
    <input id="addField" type="text" size="70%" placeholder="Task" name="Task">
    <button type="button" onclick="newElement()">Add</button>
</header>
<div>
    <div class="firstBar">
        <div class="fafaArrow">
            <i class="fa fa-caret-up" ></i>
            <i class="fa fa-caret-down"></i>
            <input class="inptxt" type="text" size="50%" name="Task">
            <i class="fa fa-filter"></i>
        </div>
    </div>
</div>



    <ul id="forToDo" >
        <div class="timeComent" draggable="true">
        </div>
    </ul>



<div id="myDelete" class="shadow">
    <div class="window">Delete item?<br>
        <span class="yes">Yes</span>
        <span class="close">No</span>
    </div>
</div>
<div id="myEdit" class="shadow">
    <div class="window">
        Edit text?<br>
        <label>
            <textarea id="editText"></textarea>
        </label>
        <span class="redact">Save</span>
        <span class="close1">Cancel</span>
    </div>
</div>
<script src="js/script2.js"></script>
</body>
</html>