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