models/Habit.py

@@ -1,4 +1,3 @@
-import json
 from dataclasses import dataclass
 from datetime import datetime
 

templates/index.html

@@ -89,9 +89,9 @@
             </a>
         </div>
 
-        <ul class="task-list row">
+        <ul class="task-list row draggable-list" id="draggable-list">
             {% for habit in habits %}
-            <li class="row d-flex align-items-center mb-2" id="habit-{{habit.id}}">
+            <li class="row d-flex align-items-center mb-2 draggable" id="habit-{{habit.id}}" draggable="true">
                 <div class="col-auto drag-handle" style="cursor: grab;">
                     <i class="bi bi-grip-vertical"></i>
                 </div>
@@ -219,4 +219,110 @@
     </script>
 
 </div>
+<script>
+    const draggable_list = document.getElementById('draggable-list');
+    const check = document.getElementById('check');
+
+    const richestPeople = [
+        'Jeff Bezos',
+        'Bill Gates',
+        'Warren Buffett',
+        'Bernard Arnault',
+        'Carlos Slim Helu',
+        'Amancio Ortega',
+        'Larry Ellison',
+        'Mark Zuckerberg',
+        'Michael Bloomberg',
+        'Larry Page'
+    ];
+
+    // Store listitems
+    const listItems =
+
+    let dragStartIndex;
+
+    createList();
+
+    // Insert list items into DOM
+    function createList() {
+        [...richestPeople]
+            .map(a => ({ value: a, sort: Math.random() }))
+            .sort((a, b) => a.sort - b.sort)
+            .map(a => a.value)
+            .forEach((person, index) => {
+                const listItem = document.createElement('li');
+
+                listItem.setAttribute('data-index', index);
+
+                listItem.innerHTML = `
+        <span class="number">${index + 1}</span>
+        <div class="draggable" draggable="true">
+          <p class="person-name">${person}</p>
+          <i class="fas fa-grip-lines"></i>
+        </div>
+      `;
+
+                listItems.push(listItem);
+
+                draggable_list.appendChild(listItem);
+            });
+
+        addEventListeners();
+    }
+
+    function dragStart() {
+        // console.log('Event: ', 'dragstart');
+        dragStartIndex = +this.closest('li').getAttribute('data-index');
+    }
+
+    function dragEnter() {
+        // console.log('Event: ', 'dragenter');
+        this.classList.add('over');
+    }
+
+    function dragLeave() {
+        // console.log('Event: ', 'dragleave');
+        this.classList.remove('over');
+    }
+
+    function dragOver(e) {
+        // console.log('Event: ', 'dragover');
+        e.preventDefault();
+    }
+
+    function dragDrop() {
+        // console.log('Event: ', 'drop');
+        const dragEndIndex = +this.getAttribute('data-index');
+        swapItems(dragStartIndex, dragEndIndex);
+
+        this.classList.remove('over');
+    }
+
+    // Swap list items that are drag and drop
+    function swapItems(fromIndex, toIndex) {
+        const itemOne = listItems[fromIndex].querySelector('.draggable');
+        const itemTwo = listItems[toIndex].querySelector('.draggable');
+
+        listItems[fromIndex].appendChild(itemTwo);
+        listItems[toIndex].appendChild(itemOne);
+    }
+
+    function addEventListeners() {
+        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);
+</script>
 {% endblock %}