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);
     }

brainstorm_canvas.php

@@ -628,6 +628,10 @@ async function handleCanvasLaneDrop(e, targetCategory) {
     const cardEl = document.getElementById(`card-${cardId}`);
     if (!cardEl) return;
 
+    // Directe reactivatie van de kaart
+    cardEl.classList.remove('opacity-40', 'scale-[0.98]', 'pointer-events-none');
+    document.querySelectorAll('.opacity-40.scale-\\[0\\.98\\]').forEach(el => el.classList.remove('opacity-40', 'scale-[0.98]', 'pointer-events-none'));
+
     const sourceLane = cardEl.closest('.brainstorm-lane');
     const sourceCategory = sourceLane ? sourceLane.getAttribute('data-category') : null;
 

roadmap.php

@@ -405,6 +405,14 @@ async function handleRoadmapQuarterDrop(e, targetQuarter) {
     const itemId = draggedRoadmapItemId || parseInt(e.dataTransfer.getData('text/plain'), 10);
     draggedRoadmapItemId = null;
 
+    if (itemId) {
+        const el = document.getElementById(`roadmap-item-${itemId}`);
+        if (el) el.classList.remove('opacity-40', 'scale-[0.99]', 'pointer-events-none');
+    }
+    document.querySelectorAll('[id^="roadmap-item-"].opacity-40').forEach(el => {
+        el.classList.remove('opacity-40', 'scale-[0.99]', 'pointer-events-none');
+    });
+
     if (!itemId || !targetQuarter) return;
 
     try {

timeline.php

@@ -573,6 +573,13 @@ function renderTimelineLaneDropBar() {
             dropBadge.classList.remove('ring-2', 'ring-indigo-500', 'bg-indigo-100', 'dark:bg-indigo-900/60');
             const cardIdStr = e.dataTransfer.getData('text/plain');
             const cardId = parseInt(cardIdStr, 10);
+            if (cardId) {
+                const el = document.querySelector(`.timeline-row[data-card-id="${cardId}"]`);
+                if (el) el.classList.remove('opacity-50', 'bg-indigo-50/50', 'dark:bg-indigo-950/30', 'pointer-events-none');
+            }
+            document.querySelectorAll('.timeline-row.opacity-50').forEach(el => {
+                el.classList.remove('opacity-50', 'bg-indigo-50/50', 'dark:bg-indigo-950/30', 'pointer-events-none');
+            });
             if (cardId && lane.id) {
                 await moveTimelineCardToLane(cardId, lane.id);
             }