Fix structure tree drag feedback: stable rows, on-row child drops

Rework the site structure tree's drag-and-drop to match Sortable's native
model instead of mid-drag drop zones:

- Drop the dashed empty-list drop zones that appeared on drag start
  (flicker, space reservation, and mis-targeted drops: the last item's
  child zone sat exactly where 'end of parent list' was).
- Every non-empty list (and the root) ends with a non-draggable  footer
  row (vuedraggable #footer slot): click to start a new page at that
  level, and while dragging it is the 'end of this list' drop target.
  It renders last even mid-drag via flex order, since Sortable appends
  end-of-list previews after it in the DOM.
- Dropping ON the lower part of a row makes the page that row's first
  child: the child list's container invisibly overlaps its own row's
  bottom (negative margin + equal padding, no layout effect) and becomes
  hit-testable only while dragging. A row's exposed top strip remains
  the 'sibling before' target. Leaf rows work too, creating a sublist.
- Indentation is structural (each nested list margin-indents itself), so
  a dragged row previews its whole subtree at the target list's depth.
  Rows get a little vertical padding to widen the drop zones.
This commit is contained in:
2026-08-16 18:05:33 +00:00
parent e38063a522
commit 3dc438f8df
5 changed files with 121 additions and 61 deletions
-13
View File
@@ -191,14 +191,6 @@ body.editing #sidebar {
}
}
/* Site structure tree: while dragging, empty child lists appear as drop
zones so a page can be moved under a childless page. */
body.tree-dragging .treelist:empty {
min-height: 1.2rem;
outline: 1px dashed var(--line);
border-radius: 4px;
}
/* The banner's own pen: opens the site editor (banner + structure).
Qualified with `button` to beat the later .edit-link rule's left offset
(both classes apply to the same element). */
@@ -211,15 +203,10 @@ button.banner-edit-link {
font: inherit;
border: none;
cursor: pointer;
opacity: 0.55;
background: none;
padding: 0;
}
.banner-edit-link:hover {
opacity: 1;
}
#sidebar {
grid-column: 1;
/* Pinned to the page's left edge (not the article's) and kept in view