feat: drag-and-drop reordering for URLs on the dashboard (#105)

parthsidpara · web-flow · commit 08ee78613ee5 · 2025-09-02T00:15:28.000+05:30
* re-order URLs on the dashboard

* create dataTransfer variable
diff --git a/web/index.html b/web/index.html
@@ -19,6 +19,59 @@
         border-color: #ffc107 !important;
         box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5) !important;
       }
+      
+      /* --- Drag & Drop Styles --- */
+      .drag-handle {
+        cursor: grab;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        padding: 0 0.75rem 0 0;
+        color: #6c757d; 
+      }
+      .drag-handle:active {
+        cursor: grabbing;
+      }
+      .drag-handle svg {
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+      }
+
+      #urls ul.list-group {
+        user-select: none;
+        position: relative;
+      }
+      #urls li.list-group-item {
+        cursor: default;
+        transition: background 0.2s, transform 0.2s;
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      #urls li.list-group-item:hover {
+        background-color: rgba(220, 53, 69, 0.1); 
+      }
+      #urls li.list-group-item.dragging {
+        opacity: 0.6;
+        transform: scale(0.95);
+        cursor: grabbing;
+        z-index: 1000;
+        background-color: rgba(220, 53, 69, 0.15);
+      }
+      #urls li.list-group-item.over::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 12px;
+        right: 12px;
+        height: 3px;
+        background-color: #dc3545;
+        border-radius: 2px;
+      }
+      #urls li.list-group-item a {
+        user-select: text;
+      }
     </style>
   </head>
   <body>
@@ -47,7 +100,17 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
 
     <template id="template-url">
       <li class="list-group-item fs-3">
-        <div class="d-flex justify-content-between align-items-center">
+        <span class="drag-handle" draggable="true" title="Drag to reorder">
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <circle cx="9" cy="5" r="2"></circle>
+            <circle cx="9" cy="12" r="2"></circle>
+            <circle cx="9" cy="19" r="2"></circle>
+            <circle cx="15" cy="5" r="2"></circle>
+            <circle cx="15" cy="12" r="2"></circle>
+            <circle cx="15" cy="19" r="2"></circle>
+          </svg>
+        </span>
+        <div class="d-flex justify-content-between align-items-center flex-grow-1">
           <div class="d-flex align-items-center flex-grow-1">
             <button type="button" class="btn btn-close mx-3" aria-label="Remove"></button>
             <a class="link-underline-dark text-truncate"></a>
@@ -76,6 +139,8 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
 
     <script>
       $(document).ready(function() {
+        const $urlList = $("#urls ul.list-group");
+
         // Use event delegation to highlight inputs when they are changed.
         $('#urls').on('change', '.duration-input, .cycles-input', function() {
           $(this).addClass('input-changed');
@@ -86,6 +151,61 @@ <h1 class="my-1">Pi<span class="bg-danger mx-1 px-1 rounded">OSK</span></h1>
         $('#execute').on('click', function() {
           $('.input-changed').removeClass('input-changed');
         });
+
+        // --- DRAG & DROP REORDER LOGIC ---
+        let draggingItem = null;
+
+        // Start dragging from the handle
+        $urlList.on("dragstart", ".drag-handle", function (e) {
+          draggingItem = $(this).closest("li")[0];
+          draggingItem.classList.add("dragging");
+          const dataTransfer = e.originalEvent.dataTransfer;
+          dataTransfer.effectAllowed = "move";
+          dataTransfer.setData("text/plain", "");
+        });
+
+        // End dragging
+        $urlList.on("dragend", ".drag-handle", function () {
+          if (draggingItem) {
+            draggingItem.classList.remove("dragging");
+          }
+          $urlList.find("li.list-group-item").removeClass("over");
+          draggingItem = null;
+        });
+
+        // Handle dragging over the list
+        $urlList.on("dragover", function (e) {
+          e.preventDefault();
+          if (!draggingItem) return;
+
+          const afterElement = getDragAfterElement(this, e.clientY);
+          $urlList.find("li.list-group-item").removeClass("over");
+
+          if (afterElement) {
+            $(afterElement).addClass("over");
+            this.insertBefore(draggingItem, afterElement);
+          } else {
+            this.appendChild(draggingItem);
+          }
+        });
+        
+        // Helper function to find the element to drop before
+        function getDragAfterElement(container, y) {
+          const draggableElements = [...container.querySelectorAll("li.list-group-item:not(.dragging)")];
+
+          return draggableElements.reduce(
+            (closest, child) => {
+              const box = child.getBoundingClientRect();
+              const offset = y - box.top - box.height / 2;
+              if (offset < 0 && offset > closest.offset) {
+                return { offset: offset, element: child };
+              } else {
+                return closest;
+              }
+            },
+            { offset: Number.NEGATIVE_INFINITY }
+          ).element;
+        }
       });
     </script>
 
