diff --git a/static/app.js b/static/app.js
index 7a71bfd..5f230d7 100644
--- a/static/app.js
+++ b/static/app.js
@@ -347,9 +347,15 @@
text = text || '';
var div = document.createElement('div');
div.className = 'item-row';
- div.innerHTML = '' + (idx+1) + '.' +
+ div.draggable = true;
+ div.innerHTML = '⋮⋮' +
+ '' + (idx+1) + '.' +
'' +
'';
+ div.addEventListener('dragstart', dragStart);
+ div.addEventListener('dragover', dragOver);
+ div.addEventListener('drop', function(e){ dragDrop(e, 'morning-list'); });
+ div.addEventListener('dragend', dragEnd);
container.appendChild(div);
renumberMorning();
}
@@ -368,10 +374,16 @@
improve = improve || '';
var div = document.createElement('div');
div.className = 'evening-row';
+ div.draggable = true;
div.innerHTML =
+ '⋮⋮' +
'' +
'' +
'';
+ div.addEventListener('dragstart', dragStart);
+ div.addEventListener('dragover', dragOver);
+ div.addEventListener('drop', function(e){ dragDrop(e, 'evening-list'); });
+ div.addEventListener('dragend', dragEnd);
container.appendChild(div);
}
@@ -404,6 +416,41 @@
btn.classList.toggle('active', editing);
};
+ /* ── 拖拽排序 ── */
+ var dragSrc = null;
+
+ function dragStart(e) {
+ dragSrc = this;
+ this.classList.add('dragging');
+ e.dataTransfer.effectAllowed = 'move';
+ }
+
+ function dragOver(e) {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ if (this !== dragSrc) this.classList.add('drag-over');
+ }
+
+ function dragDrop(e, listId) {
+ e.preventDefault();
+ this.classList.remove('drag-over');
+ if (dragSrc === this) return;
+ var container = document.getElementById(listId);
+ var items = container.querySelectorAll('.' + (dragSrc.classList.contains('evening-row') ? 'evening-row' : 'item-row'));
+ var from = Array.prototype.indexOf.call(items, dragSrc);
+ var to = Array.prototype.indexOf.call(items, this);
+ if (from < to) { container.insertBefore(dragSrc, this.nextSibling); }
+ else { container.insertBefore(dragSrc, this); }
+ if (listId === 'morning-list') renumberMorning();
+ triggerAutoSave();
+ }
+
+ function dragEnd() {
+ this.classList.remove('dragging');
+ document.querySelectorAll('.drag-over').forEach(function(el){ el.classList.remove('drag-over'); });
+ dragSrc = null;
+ }
+
window.addStudyItem = function() {
var name = prompt('请输入新习惯名称:');
if (!name || !name.trim()) return;
diff --git a/static/style.css b/static/style.css
index f4d8fb8..5f0ee22 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1810,3 +1810,10 @@ body {
.cal-task-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; border-bottom: 1px solid var(--bg); }
.cal-task-item:last-child { border-bottom: none; }
.cal-task-dot { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
+
+/* 拖拽排序 */
+.drag-handle { display: none; cursor: grab; color: var(--text-muted); font-size: 14px; user-select: none; padding: 0 4px; line-height: 1; letter-spacing: -2px; }
+.card.editing .drag-handle { display: block; }
+.item-row.dragging, .evening-row.dragging { opacity: 0.5; }
+.item-row.drag-over, .evening-row.drag-over { border-color: var(--primary) !important; background: var(--primary-light); }
+.evening-drag { position: absolute; left: 6px; top: 8px; }