add finished sortable list

Author: solygambas

77-sortable list/script.js

@@ -37,7 +37,67 @@ function createList() {
       listItems.push(listItem);
       draggableList.appendChild(listItem);
     });
+  addListeners();
 }
 
+function dragStart() {
+  dragStartIndex = +this.closest("li").getAttribute("data-index");
+}
+
+function dragEnter() {
+  this.classList.add("over");
+}
+
+function dragLeave() {
+  this.classList.remove("over");
+}
+
+function dragOver(e) {
+  e.preventDefault(); // dragDrop is not executed otherwise
+}
+
+function dragDrop() {
+  const dragEndIndex = +this.getAttribute("data-index");
+  swapItems(dragStartIndex, dragEndIndex);
+  this.classList.remove("over");
+}
+
+function swapItems(fromIndex, toIndex) {
+  // Get Items
+  const itemOne = listItems[fromIndex].querySelector(".draggable");
+  const itemTwo = listItems[toIndex].querySelector(".draggable");
+  // Swap Items
+  listItems[fromIndex].appendChild(itemTwo);
+  listItems[toIndex].appendChild(itemOne);
+}
+
+function checkOrder() {
+  listItems.forEach((listItem, index) => {
+    const personName = listItem.querySelector(".draggable").innerText.trim();
+    if (personName !== richestPeople[index]) listItem.classList.add("wrong");
+    else {
+      listItem.classList.remove("wrong");
+      listItem.classList.add("right");
+    }
+  });
+}
+
+// Event Listeners
+function addListeners() {
+  const draggables = document.querySelectorAll(".draggable");
+  const dragListItems = document.querySelectorAll(".draggable-list li");
+  draggables.forEach((draggable) => {
+    draggable.addEventListener("dragstart", dragStart);
+  });
+  dragListItems.forEach((item) => {
+    item.addEventListener("dragover", dragOver);
+    item.addEventListener("drop", dragDrop);
+    item.addEventListener("dragenter", dragEnter);
+    item.addEventListener("dragleave", dragLeave);
+  });
+}
+
+check.addEventListener("click", checkOrder);
+
 // Init
 createList();