Brainstorm aanpassingen

board.php

@@ -508,17 +508,19 @@ function onBoardSelectChange(bId) {
 }
 
 // 2. Data van specifiek bord inladen
-async function loadBoardData(boardId) {
+async function loadBoardData(boardId, showLoader = true) {
     currentBoardId = boardId;
     document.getElementById('linkToTimeline')?.setAttribute('href', `/timeline.php?board_id=${boardId}`);
     const container = document.getElementById('boardLanesContainer');
-    container.innerHTML = `
-        <div class="flex items-center justify-center w-full py-20 text-slate-400 text-sm">
-            <i data-lucide="loader-2" class="w-5 h-5 animate-spin mr-2"></i>
-            <span>Bord laden...</span>
-        </div>
-    `;
-    if (typeof lucide !== 'undefined') lucide.createIcons();
+    if (showLoader) {
+        container.innerHTML = `
+            <div class="flex items-center justify-center w-full py-20 text-slate-400 text-sm">
+                <i data-lucide="loader-2" class="w-5 h-5 animate-spin mr-2"></i>
+                <span>Bord laden...</span>
+            </div>
+        `;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
 
     try {
         const res = await fetch(`/api/board.php?action=get_board_data&board_id=${boardId}`);
@@ -567,9 +569,13 @@ function onCardDragStart(e, cardId) {
 function onCardDragEnd(e) {
     if (draggedCardId) {
         const el = document.getElementById(`card-${draggedCardId}`);
-        if (el) el.classList.remove('opacity-40');
+        if (el) el.classList.remove('opacity-40', 'pointer-events-none');
         draggedCardId = null;
     }
+    // Verwijder eventuele achtergebleven opacity op alle kaarten
+    document.querySelectorAll('[id^="card-"].opacity-40').forEach(el => {
+        el.classList.remove('opacity-40', 'pointer-events-none');
+    });
     setTimeout(() => {
         isDraggingCard = false;
     }, 150);
@@ -599,6 +605,23 @@ async function onLaneDrop(e, targetLaneId) {
 
     const rawId = draggedCardId || e.dataTransfer.getData('text/plain');
     const cardId = parseInt(rawId, 10);
+    
+    // Direct re-activeren van het gesleepte element
+    const activeEl = cardId ? document.getElementById(`card-${cardId}`) : null;
+    if (activeEl) {
+        activeEl.classList.remove('opacity-40', 'pointer-events-none');
+        // Optimistic DOM append als dropZone en element bestaan
+        const emptyNotice = dropZone.querySelector('.pointer-events-none');
+        if (emptyNotice && emptyNotice.innerText.includes('Geen taken')) {
+            emptyNotice.remove();
+        }
+        dropZone.appendChild(activeEl);
+    }
+    draggedCardId = null;
+    setTimeout(() => {
+        isDraggingCard = false;
+    }, 150);
+
     if (!cardId) return;
 
     try {
@@ -611,7 +634,7 @@ async function onLaneDrop(e, targetLaneId) {
                 target_position: 999
             })
         });
-        await loadBoardData(currentBoardId);
+        await loadBoardData(currentBoardId, false);
     } catch (err) {
         console.error('Fout bij verplaatsen taak:', err);
     }