diff --git a/board.php b/board.php index 956917d..59e5d1a 100644 --- a/board.php +++ b/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 = ` -
- - Bord laden... -
- `; - if (typeof lucide !== 'undefined') lucide.createIcons(); + if (showLoader) { + container.innerHTML = ` +
+ + Bord laden... +
+ `; + 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); } diff --git a/brainstorm_canvas.php b/brainstorm_canvas.php index 706895a..25ba359 100644 --- a/brainstorm_canvas.php +++ b/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; diff --git a/roadmap.php b/roadmap.php index cf91876..87a4482 100644 --- a/roadmap.php +++ b/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 { diff --git a/timeline.php b/timeline.php index 0f6dd6c..78814dc 100644 --- a/timeline.php +++ b/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); }