better moving of skills on the timeline

css/planner.css

@@ -838,6 +838,14 @@
   border-top: 1px solid var(--border);
 }
 
+.timeline-player-row--drop-ok .timeline-track {
+  background-color: rgba(88,180,116,.08);
+}
+
+.timeline-player-row--drop-bad .timeline-track {
+  background-color: rgba(224,92,92,.08);
+}
+
 .timeline-boss-action {
   position:      absolute;
   top:           8px;
@@ -931,6 +939,77 @@
   background: linear-gradient(to right, rgba(74,158,255,.30) 0%, rgba(74,158,255,.30) var(--active-width), rgba(74,158,255,.06) var(--active-width), rgba(74,158,255,.06) 100%);
 }
 
+.timeline-drag-preview {
+  position:       absolute;
+  top:            6px;
+  width:          var(--cd-width);
+  min-width:      28px;
+  height:         26px;
+  display:        flex;
+  align-items:    center;
+  gap:            4px;
+  padding:        0 6px;
+  border:         1px solid rgba(200,168,75,.85);
+  border-radius:  var(--r);
+  background:     linear-gradient(to right, rgba(200,168,75,.42) 0%, rgba(200,168,75,.42) var(--active-width), rgba(200,168,75,.14) var(--active-width), rgba(200,168,75,.14) 100%);
+  color:          var(--gold);
+  font-size:      11px;
+  pointer-events: none;
+  z-index:        6;
+  box-shadow:     0 0 0 1px rgba(0,0,0,.25), 0 0 16px rgba(200,168,75,.18);
+  overflow:       hidden;
+}
+
+.timeline-drag-preview::before {
+  content:       "";
+  position:      absolute;
+  left:          0;
+  top:           -6px;
+  bottom:        -6px;
+  width:         1px;
+  background:    var(--gold);
+  box-shadow:    0 0 10px rgba(200,168,75,.55);
+}
+
+.timeline-drag-preview--bad {
+  border-color: rgba(224,92,92,.85);
+  background:   rgba(224,92,92,.18);
+  color:        var(--red);
+}
+
+.timeline-drag-preview--bad::before {
+  background: var(--red);
+  box-shadow: 0 0 10px rgba(224,92,92,.55);
+}
+
+.timeline-drag-preview img {
+  width:       18px;
+  height:      18px;
+  object-fit:  contain;
+  flex-shrink: 0;
+  position:    relative;
+  z-index:     1;
+}
+
+.timeline-drag-preview span {
+  position:      relative;
+  z-index:       1;
+  overflow:      hidden;
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+}
+
+.timeline-drag-preview-active {
+  position: absolute !important;
+  left:     0;
+  top:      0;
+  bottom:   0;
+  width:    var(--active-width);
+  background: currentColor;
+  opacity:  .20;
+  z-index:  0 !important;
+}
+
 .timeline-axis {
   min-height: 28px;
 }

js/planner.js

@@ -1004,6 +1004,50 @@ function initTimeline(planId) {
 
     let timelinePan = null;
     let suppressNextTimelineClick = false;
+    let timelineDrag = null;
+
+    function removeDragPreview() {
+        document.getElementById('timeline-drag-preview')?.remove();
+        timeline.querySelectorAll('.timeline-player-row--drop-ok, .timeline-player-row--drop-bad')
+            .forEach(row => row.classList.remove('timeline-player-row--drop-ok', 'timeline-player-row--drop-bad'));
+    }
+
+    function updateDragPreview(event) {
+        if (!timelineDrag) return;
+        removeDragPreview();
+
+        const track = event.target.closest('.timeline-player-row .timeline-track');
+        const row = event.target.closest('.timeline-player-row');
+        if (!track || !row) return;
+
+        const plan = getPlan(planId);
+        if (!plan) return;
+        const rect = track.getBoundingClientRect();
+        const duration = planDurationMs(plan);
+        const deltaPx = event.clientX - timelineDrag.startClientX;
+        const timestamp = Math.max(0, timelineDrag.startTimestamp + (deltaPx / rect.width) * duration);
+        const left = Math.max(0, Math.min(100, (timestamp / duration) * 100));
+        const durationPct = Math.max(1.2, Math.min(100 - left, (timelineDrag.durationSec * 1000 / duration) * 100));
+        const cooldownPct = Math.max(durationPct, Math.min(100 - left, (timelineDrag.cooldownSec * 1000 / duration) * 100));
+        const activePct = Math.min(100, (durationPct / cooldownPct) * 100);
+        const valid = row.dataset.ability === timelineDrag.ability
+            && jobCanUseAbility(row.dataset.job, timelineDrag.ability);
+
+        row.classList.add(valid ? 'timeline-player-row--drop-ok' : 'timeline-player-row--drop-bad');
+
+        const preview = document.createElement('div');
+        preview.id = 'timeline-drag-preview';
+        preview.className = `timeline-drag-preview ${valid ? '' : 'timeline-drag-preview--bad'}`;
+        preview.style.left = `${left}%`;
+        preview.style.setProperty('--cd-width', `${cooldownPct}%`);
+        preview.style.setProperty('--active-width', `${activePct}%`);
+        preview.innerHTML = `
+            <span class="timeline-drag-preview-active"></span>
+            ${timelineDrag.icon ? `<img src="${escHtml(timelineDrag.icon)}" alt="">` : ''}
+            <span>${escHtml(timelineDrag.label)}</span>
+        `;
+        track.appendChild(preview);
+    }
 
     timeline.addEventListener('pointerdown', e => {
         if (e.button !== 0) return;
@@ -1122,6 +1166,20 @@ function initTimeline(planId) {
             job: block.dataset.job,
         });
         if (!plan || !found) return;
+        const transparent = document.createElement('canvas');
+        transparent.width = 1;
+        transparent.height = 1;
+        e.dataTransfer.setDragImage(transparent, 0, 0);
+        timelineDrag = {
+            ability: block.dataset.ability,
+            job: block.dataset.job,
+            label: block.querySelector('span:last-child')?.textContent ?? block.dataset.ability,
+            icon: block.querySelector('img')?.getAttribute('src') ?? '',
+            startClientX: e.clientX,
+            startTimestamp: assignmentStartMs(found.mechanic, found.assignment),
+            durationSec: assignmentDurationSeconds(found.assignment),
+            cooldownSec: assignmentCooldownSeconds(found.assignment),
+        };
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('text/plain', JSON.stringify({
             mechanicId: block.dataset.mechanicId,
@@ -1133,10 +1191,18 @@ function initTimeline(planId) {
     });
 
     timeline.addEventListener('dragover', e => {
-        if (e.target.closest('.timeline-player-row .timeline-track')) e.preventDefault();
+        if (e.target.closest('.timeline-player-row .timeline-track')) {
+            e.preventDefault();
+            updateDragPreview(e);
+        }
+    });
+
+    timeline.addEventListener('dragleave', e => {
+        if (!timeline.contains(e.relatedTarget)) removeDragPreview();
     });
 
     timeline.addEventListener('drop', e => {
+        removeDragPreview();
         const track = e.target.closest('.timeline-player-row .timeline-track');
         const row = e.target.closest('.timeline-player-row');
         if (!track || !row) return;
@@ -1152,6 +1218,12 @@ function initTimeline(planId) {
         const timestamp = (Number(data.startTimestamp) || 0) + timestampDelta;
         if (row.dataset.ability && data.ability !== row.dataset.ability) return;
         updateTimelineAssignmentPosition(planId, data.mechanicId, data.ability, data.job, row.dataset.job, timestamp);
+        timelineDrag = null;
+    });
+
+    timeline.addEventListener('dragend', () => {
+        timelineDrag = null;
+        removeDragPreview();
     });
 
     settings.addEventListener('change', e => {