randogoth/kanban-todo.txt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor drag and drop.

Browse source
This commit is contained in:
Chris McCormick 2026-01-01 14:52:41 +08:00
parent 570d764046
commit d3629d8b30
1 changed files with 25 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

68
index.html
View file

@ -506,6 +506,10 @@ chmod 755 kbtd
return el; return el;
} }
function getDataInt(el, key) {
return parseInt(el.dataset[key]);
}
function insertInstallInstructions(containerId) { function insertInstallInstructions(containerId) {
const template = $('#install-instructions-template'); const template = $('#install-instructions-template');
const clone = template.content.cloneNode(true); const clone = template.content.cloneNode(true);
@ -992,7 +996,7 @@ chmod 755 kbtd
className: `card-checkbox ${card.completed ? 'checked' : ''}`, className: `card-checkbox ${card.completed ? 'checked' : ''}`,
onclick: async (e) => { onclick: async (e) => {
e.stopPropagation(); e.stopPropagation();
const lineNum = parseInt(cardDiv.dataset.lineNumber); const lineNum = getDataInt(cardDiv, 'lineNumber');
const originalLine = cardDiv.dataset.originalLine; const originalLine = cardDiv.dataset.originalLine;
const newLine = originalLine.includes('- [x]') const newLine = originalLine.includes('- [x]')
? originalLine.replace('- [x]', '- [ ]') ? originalLine.replace('- [x]', '- [ ]')
@ -1112,11 +1116,23 @@ chmod 755 kbtd
renderBoard(); renderBoard();
} }
function clearDropIndicators() {
$$('.drop-indicator').forEach(el => el.classList.remove('active'));
}
function setActiveDropIndicator(colIndex, position) {
console.log('Setting active drop indicator: col', colIndex, 'position', position);
dragState.currentDropTarget = { colIndex, position };
clearDropIndicators();
const indicator = $(`.drop-indicator[data-col-index="${colIndex}"][data-position="${position}"]`);
if (indicator) indicator.classList.add('active');
}
function handleDragStart(e, cardDiv) { function handleDragStart(e, cardDiv) {
dragState.source = { dragState.source = {
lineNumber: parseInt(cardDiv.dataset.lineNumber), lineNumber: getDataInt(cardDiv, 'lineNumber'),
colIndex: parseInt(cardDiv.dataset.colIndex), colIndex: getDataInt(cardDiv, 'colIndex'),
cardIndex: parseInt(cardDiv.dataset.cardIndex) cardIndex: getDataInt(cardDiv, 'cardIndex')
}; };
e.target.classList.add('dragging'); e.target.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
@ -1131,12 +1147,6 @@ chmod 755 kbtd
dragState.currentDropTarget = null; dragState.currentDropTarget = null;
} }
function clearDropIndicators() {
$$('.drop-indicator').forEach(el => {
el.classList.remove('active');
});
}
function handleCardDragEnter(e, cardDiv, colIndex, cardIndex) { function handleCardDragEnter(e, cardDiv, colIndex, cardIndex) {
if (!dragState.source) return; if (!dragState.source) return;
@ -1145,24 +1155,9 @@ chmod 755 kbtd
const rect = cardDiv.getBoundingClientRect(); const rect = cardDiv.getBoundingClientRect();
const midpoint = rect.top + rect.height / 2; const midpoint = rect.top + rect.height / 2;
const mouseY = e.clientY; const position = e.clientY < midpoint ? cardIndex : cardIndex + 1;
let position; setActiveDropIndicator(colIndex, position);
if (mouseY < midpoint) {
position = cardIndex;
} else {
position = cardIndex + 1;
}
console.log('Card drag enter: col', colIndex, 'position', position);
dragState.currentDropTarget = { colIndex, position };
clearDropIndicators();
const indicator = $(`.drop-indicator[data-col-index="${colIndex}"][data-position="${position}"]`);
if (indicator) {
indicator.classList.add('active');
}
} }
function handleDragOver(e, colIndex, cardList) { function handleDragOver(e, colIndex, cardList) {
@ -1175,12 +1170,7 @@ chmod 755 kbtd
if (cards.length === 0) { if (cards.length === 0) {
console.log('Drag over empty column', colIndex); console.log('Drag over empty column', colIndex);
dragState.currentDropTarget = { colIndex, position: 0 }; setActiveDropIndicator(colIndex, 0);
clearDropIndicators();
const indicator = cardList.querySelector('.drop-indicator');
if (indicator) {
indicator.classList.add('active');
}
return; return;
} }
@ -1201,21 +1191,13 @@ chmod 755 kbtd
}); });
if (closestCard) { if (closestCard) {
const cardIndex = parseInt(closestCard.dataset.cardIndex); const cardIndex = getDataInt(closestCard, 'cardIndex');
const position = insertBefore ? cardIndex : cardIndex + 1; const position = insertBefore ? cardIndex : cardIndex + 1;
if (!dragState.currentDropTarget || if (!dragState.currentDropTarget ||
dragState.currentDropTarget.colIndex !== colIndex || dragState.currentDropTarget.colIndex !== colIndex ||
dragState.currentDropTarget.position !== position) { dragState.currentDropTarget.position !== position) {
setActiveDropIndicator(colIndex, position);
console.log('Drag over: col', colIndex, 'position', position);
dragState.currentDropTarget = { colIndex, position };
clearDropIndicators();
const indicator = $(`.drop-indicator[data-col-index="${colIndex}"][data-position="${position}"]`);
if (indicator) {
indicator.classList.add('active');
}
} }
} }
} }