Drag and Dropについて

To do Listを作って、登録したリストをDrag and Dropしたいと思いますが、
リストの作成はできますが、順番を変えるためのDrag and Dropがうまくいかないです。
console.logでも特にエラーは発生してないですが、どなたかおしえていただけないでしょうか？
正直、Drag and DropはWEB上に一般公開されているソースから持ってきて、繋げました。
URL: https://www.ipentec.com/document/javascript-list-sortable-item

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>To Do List</title>
  <style type="text/css">
      li {
        -khtml-user-drag: element;
      }
      .done {
        text-decoration: line-through;
      }
      button {
        margin: 5px;
      }
      [draggable] {
      user-select: none;
      }
      #list {
          list-style-type: none;
      }
      .item {
          width: 100px;
          padding-bottom: 5px;
          padding-top: 5px;
          border-top: 2px solid blue;
          cursor: move;
      }
      .item.dragElem {
          opacity: 0.4;
      }
  </style>
</head>
<body onload="PageLoad();">
  <!--list作成-->  
  <div class="content"> 
    <ul id="list">
    </ul>
  </div>
  
  <!--list新規追加-->  
  <div class="add-to-do">
    <input type="text" id="input" placeholder="Add a to-do"><button id="add-button">Add</button>
  </div>
  <script>
    const addButton = document.querySelector('#add-button');

    addButton.addEventListener('click', function() {      
      const input = document.querySelector('input');
      const li = document.createElement('li');
      li.setAttribute("draggable","true");
      li.classList.add("item");
      li.innerText = input.value;

      const doneButton = document.createElement('button');
      doneButton.innerText = 'Done';
      li.appendChild(doneButton);

      doneButton.addEventListener('click', function() {
        const li = doneButton.closest('li');
        li.classList.add('done');
      })
  
      const ul = document.querySelector('#list');
      ul.appendChild(li);
    })

/***** ドラッグ & ドロップ処理 *****/
var dragSrcEl = null;

    function handleDragStart(e) {
      dragSrcEl = this;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.outerHTML);
      this.classList.add('dragElem');
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      this.classList.add('over');
      e.dataTransfer.dropEffect = 'move'; 
      return false;
    }

    function handleDragEnter(e) {
    }

    function handleDragLeave(e) {
      this.classList.remove('over'); 
    }

    function handleDrop(e) {
      if (e.stopPropagation) {
        e.stopPropagation(); 
      }

      if (dragSrcEl != this) {
        this.parentNode.removeChild(dragSrcEl);
        var dropHTML = e.dataTransfer.getData('text/html');
        this.insertAdjacentHTML('beforebegin', dropHTML);
        var dropElem = this.previousSibling;
        addDnDHandlers(dropElem);

      }
      this.classList.remove('over');
      return false;
    }

    function handleDragEnd(e) {
      this.classList.remove('over');
    }

    function addDnDHandlers(elem) {
      elem.addEventListener('dragstart', handleDragStart, false);
      elem.addEventListener('dragenter', handleDragEnter, false)
      elem.addEventListener('dragover', handleDragOver, false);
      elem.addEventListener('dragleave', handleDragLeave, false);
      elem.addEventListener('drop', handleDrop, false);
      elem.addEventListener('dragend', handleDragEnd, false);
    }

    function PageLoad() {
      var cols = document.querySelectorAll('#list .item');
      [].forEach.call(cols, addDnDHandlers);
    }
  </script>
</body>
</html>

m.ts10806

2021/01/02 08:28

「うまくいかない」が他者に伝える情報量は皆無ですので「起きている現象」「調べたこと」「試したこと」を具体的に記載してください。あと可能なら参考先もリンクで提示してください。

kinsncn

2021/01/02 09:54 編集

ご指摘ありがとうございました。現象としては、以下になります。リストの新規作成はできます。ただ、作成された複数のリストをDrag and Dropで、順番を入れ替えを実施しても、順番が変わらないです。（console.logでエラーは発生してないですね） Drag and Drop部分は以下のページを参照しました。 https://www.ipentec.com/document/javascript-list-sortable-item

m.ts10806

2021/01/02 09:06

質問は編集できます。原則質問修正してお返しください。「できる」「できない」ではなく「何が起きているか」を記載してください。エラーも確認してください。

kinsncn

2021/01/02 10:43

修正しましたが、よろしいでしょうか？