Use CSS classes for drag-dim effect and DOM-appended canvas for drag ghost

css/style.css

@@ -138,6 +138,7 @@ input:focus, select:focus { border-color:var(--accent); }
 
 .entry-card, .entry-row, .entry-compact, .table-row-drag { cursor:pointer; user-select:none; }
 .entry-card.drag-over, .entry-row.drag-over, .entry-compact.drag-over, .table-row-drag.drag-over { border-color:var(--accent)!important; box-shadow:0 0 15px rgba(59,130,246,0.3); }
+.entry-card.drag-dim, .entry-row.drag-dim, .entry-compact.drag-dim, .table-row-drag.drag-dim { opacity:0.3!important; filter:grayscale(0.6); }
 .entry-card.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(59,130,246,0.35); background:rgba(59,130,246,0.18); }
 .entry-row.selected, .entry-compact.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(59,130,246,0.35); background:rgba(59,130,246,0.14); border-left:3px solid var(--accent); }
 .table-row-drag.selected td { background:rgba(59,130,246,0.14)!important; box-shadow:inset 0 0 0 1px var(--accent); border-bottom:1px solid var(--accent); }

js/app.js

@@ -863,8 +863,8 @@ function attachEvents() {
 function setupDrag() {
     const c = document.getElementById('entriesContainer'); if (!c) return;
     c.querySelectorAll('[draggable="true"]').forEach(el => {
-        el.ondragstart = function(e) { draggedId = this.dataset.id; const dragIds = selectedIds.has(parseInt(draggedId)) && selectedIds.size > 1 ? [...selectedIds] : [parseInt(draggedId)]; c.querySelectorAll('[draggable="true"]').forEach(card => { if (dragIds.includes(parseInt(card.dataset.id))) card.style.opacity = '0.5'; }); e.dataTransfer.setData('text/plain', this.dataset.id); e.dataTransfer.effectAllowed = 'move'; if (dragIds.length > 1) { const cv = document.createElement('canvas'); cv.width = 80; cv.height = 28; const x = cv.getContext('2d'); x.fillStyle = 'rgba(59,130,246,0.85)'; x.beginPath(); x.arc(14, 14, 12, 0, Math.PI*2); x.fill(); x.fillStyle = '#fff'; x.font = 'bold 13px sans-serif'; x.textAlign = 'center'; x.textBaseline = 'middle'; x.fillText(dragIds.length, 14, 14); x.fillStyle = '#fff'; x.font = '12px sans-serif'; x.textAlign = 'left'; x.fillText('selected', 30, 14); e.dataTransfer.setDragImage(cv, 6, 14); } };
+        el.ondragstart = function(e) { draggedId = this.dataset.id; const dragIds = selectedIds.has(parseInt(draggedId)) && selectedIds.size > 1 ? [...selectedIds] : [parseInt(draggedId)]; c.querySelectorAll('[draggable="true"]').forEach(card => { card.classList.toggle('drag-dim', dragIds.includes(parseInt(card.dataset.id))); }); e.dataTransfer.setData('text/plain', this.dataset.id); e.dataTransfer.effectAllowed = 'move'; if (dragIds.length > 1) { const cv = document.createElement('canvas'); cv.width = 90; cv.height = 28; const g = cv.getContext('2d'); g.fillStyle = 'rgba(0,0,0,0.75)'; g.beginPath(); g.moveTo(14,0); g.lineTo(76,0); g.quadraticCurveTo(90,0,90,14); g.quadraticCurveTo(90,28,76,28); g.lineTo(14,28); g.quadraticCurveTo(0,28,0,14); g.quadraticCurveTo(0,0,14,0); g.fill(); g.fillStyle = '#3b82f6'; g.beginPath(); g.arc(14,14,10,0,Math.PI*2); g.fill(); g.fillStyle = '#fff'; g.font = 'bold 13px sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(''+dragIds.length,14,15); g.fillStyle = '#fff'; g.font = '12px sans-serif'; g.textAlign = 'left'; g.fillText('selected',28,15); cv.style.position = 'fixed'; cv.style.top = '-1000px'; document.body.appendChild(cv); e.dataTransfer.setDragImage(cv, 6, 14); setTimeout(() => cv.remove(), 50); } };
-        el.ondragend = function(e) { c.querySelectorAll('[draggable="true"]').forEach(card => card.style.opacity = '1'); draggedId = null; c.querySelectorAll('.drag-over').forEach(x => x.classList.remove('drag-over')); document.getElementById('trashBtn')?.classList.remove('drag-over'); };
+        el.ondragend = function(e) { c.querySelectorAll('.drag-dim').forEach(card => card.classList.remove('drag-dim')); draggedId = null; c.querySelectorAll('.drag-over').forEach(x => x.classList.remove('drag-over')); document.getElementById('trashBtn')?.classList.remove('drag-over'); };
         el.ondragover = function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (this.dataset.id !== draggedId) this.classList.add('drag-over'); };
         el.ondragleave = function(e) { this.classList.remove('drag-over'); };
         el.ondrop = function(e) { e.preventDefault(); e.stopPropagation(); this.classList.remove('drag-over'); const fromId = parseInt(e.dataTransfer.getData('text/plain')); const toId = parseInt(this.dataset.id); if (!fromId || !toId) return; const ids = selectedIds.has(fromId) && selectedIds.size > 1 ? [...selectedIds] : [fromId]; if (ids.length === 1 && ids[0] === toId) return; const base = order.length > 0 ? order : entries.filter(e => e).map(e => e.id); const filtered = base.filter(id => !ids.includes(id)); const idx = filtered.indexOf(toId); idx > -1 ? filtered.splice(idx, 0, ...ids) : filtered.push(...ids); order = filtered; localStorage.setItem('entryOrder', JSON.stringify(order)); const map = new Map(entries.filter(e => e).map(e => [e.id, e])); entries = order.map(id => map.get(id)).filter(e => e); entries.sort((a, b) => (b.favorite || 0) - (a.favorite || 0)); render(); };