diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index a08097fe..5d986bac 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -547,6 +547,11 @@ of a full-width panel and nothing on the right.
   Below `xl` the band's buttons are glyphs named in their tooltips, and a filter's hidden count is "+N" with
   its sentence in the tooltip. The row the band replaces keeps its height, invisible, so a tick moves no row.
   On a phone the count is its number (the words read out, and in the tooltip) and the undo pair stays out.
+  A row's grip also carries it onto a list in the rail, under a sort or a filter too (the grip then says
+  so, and no key lifts it); a selected row carries every selected one, named on the drag image below the
+  pointer. The target row lights up (`ring-accent`); the open list is none; an unpinned rail peeks by the
+  drag's own hover and scrolls at its edges. Dropped inside the list, one row takes its new place and many
+  stay. A key never leaves the list and moves its own row: the band and the row's menu are the other way.
 - **Motion:** 150–300ms micro-interactions, transform/opacity only; `prefers-reduced-motion` is respected.
   [WCAG 2.3.3]
 
@@ -850,3 +855,4 @@ of a full-width panel and nothing on the right.
 | 2026-11-01 | Grip on a phone (owner A)                        | Below a 24rem table a playlist row has no grip: the title keeps its width, and the row menu keeps the moves.                                                                                                                                                                                                                                                                                        |
 | 2026-11-01 | Selection band on a tablet (owner A)             | Below `xl` the band is glyphs on one row, the names in tooltip and aria-label, as on the channel header; the replaced row stays in the same grid cell, invisible, so the first tick moves no row under the second tap.                                                                                                                                                                              |
 | 2026-11-01 | Playlist heading on a narrow window (owner A)    | The list's name had no width left: below `xl` Unsynced is its dot (the word read out, the hint in the tooltip); on a phone the cover is gone and Play all is its glyph, named in the tooltip.                                                                                                                                                                                                       |
+| 2026-11-02 | Dragging onto a list (owner D5 a, D6 a)          | The grip carries a row, or every selected row with a selected one, onto a list in the rail; the toast undoes. Many dropped inside the list stay; a coarse pointer's drawer never peeks, so its rail is a target only when pinned.                                                                                                                                                                   |
diff --git a/frontend/e2e/playlists.spec.ts b/frontend/e2e/playlists.spec.ts
new file mode 100644
index 00000000..57b8417d
--- /dev/null
+++ b/frontend/e2e/playlists.spec.ts
@@ -0,0 +1,259 @@
+import { test, expect, type Locator, type Page } from "@playwright/test";
+import { openApp } from "./helpers";
+
+// A video dragged onto a list in the rail, with a real pointer: the rail and the page are separate
+// React trees, and jsdom lays out nothing to drag across. The browser projects share one account, so
+// each test holds lists of its own, named for it, and takes them away after.
+
+interface Listed {
+  id: number;
+  items: { id: string; title: string }[];
+}
+
+const made: number[] = [];
+
+async function newList(page: Page, name: string, videos: string[] = []): Promise<number> {
+  const res = await page.request.post("/api/playlists", { data: { name } });
+  const { id } = (await res.json()) as { id: number };
+  made.push(id);
+  for (const video_id of videos) {
+    const added = await page.request.post(`/api/playlists/${String(id)}/items`, {
+      data: { video_id },
+    });
+    expect(added.ok()).toBe(true);
+  }
+  return id;
+}
+
+const contents = async (page: Page, id: number) =>
+  ((await (await page.request.get(`/api/playlists/${String(id)}`)).json()) as Listed).items.map(
+    (v) => v.id,
+  );
+
+async function setUp(page: Page, name: string, project: string) {
+  await pinOnTouch(page, project);
+  const feed = (await (await page.request.get("/api/feed?limit=3")).json()) as {
+    items: { id: string; title: string }[];
+  };
+  expect(feed.items.length).toBe(3);
+  const videos = feed.items;
+  const from = await newList(
+    page,
+    `${name} from`,
+    videos.map((v) => v.id),
+  );
+  const to = await newList(page, `${name} to`);
+  await openApp(page, `/?page=playlists&pl=${String(from)}`);
+  await expect(page.getByRole("heading", { name: `${name} from` })).toBeVisible();
+  await expect(page.locator("tbody tr")).toHaveCount(3);
+  return { videos, from, to, target: page.locator(`[data-playlist-drop="${String(to)}"]`) };
+}
+
+const centre = async (el: Locator) => {
+  const box = await el.boundingBox();
+  if (!box) throw new Error("nothing to point at");
+  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+};
+
+/** Pick the row up by its grip and carry it to a point, the button still held. */
+async function carry(page: Page, grip: Locator, to: { x: number; y: number }) {
+  const from = await centre(grip);
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+  await page.mouse.move(from.x + 8, from.y + 8, { steps: 3 });
+  await page.mouse.move(to.x, to.y, { steps: 12 });
+}
+
+/** The same onto the rail. An unpinned one is a tab until the drag's own hover peeks it open. */
+async function carryToRail(page: Page, grip: Locator, target: Locator) {
+  if (await target.isVisible()) {
+    await carry(page, grip, await centre(target));
+    return;
+  }
+  const tab = page.getByRole("button", { name: "Pin Playlists open" });
+  await carry(page, grip, await centre(tab));
+  await expect(target).toBeVisible();
+  await page.mouse.move(...(Object.values(await centre(target)) as [number, number]), { steps: 6 });
+}
+
+/** What dnd-kit tells a screen reader: said once the drag has taken the step in, so a drop after it
+ *  is the one a person makes, not one that beats the row to its new place. */
+const said = (page: Page, text: RegExp) =>
+  expect(page.locator('[id^="DndLiveRegion"]').filter({ hasText: text })).toBeAttached();
+
+/** A coarse pointer's rail never peeks, a drawer instead: on the tablet it is pinned, for these. */
+async function pinOnTouch(page: Page, project: string) {
+  if (project !== "ipad") return;
+  await page.route("**/api/me", async (route) => {
+    const res = await route.fetch();
+    const me = (await res.json()) as { preferences?: Record<string, unknown> };
+    await route.fulfill({
+      response: res,
+      json: { ...me, preferences: { ...me.preferences, playlistsCollapsed: false } },
+    });
+  });
+}
+
+test.describe("dragging onto a list", { tag: "@playlists" }, () => {
+  test.afterEach(async ({ page }) => {
+    await page.mouse.up();
+    for (const id of made.splice(0)) await page.request.delete(`/api/playlists/${String(id)}`);
+  });
+
+  test("a row leaves for the list it is dropped on, lit up on the way, and Undo brings it back", async ({
+    page,
+  }, info) => {
+    const { videos, from, to, target } = await setUp(
+      page,
+      `drag one ${info.project.name}`,
+      info.project.name,
+    );
+    const grip = page.getByRole("button", { name: `Reorder “${videos[1]!.title}”`, exact: false });
+    await carryToRail(page, grip, target);
+    await expect(target).toHaveClass(/ring-2/);
+    await page.mouse.up();
+    await expect(target).not.toHaveClass(/ring-2/);
+    await expect(page.locator("tbody tr")).toHaveCount(2);
+    // The grip that held the focus has left: the keyboard keeps its place in the list.
+    await expect
+      .poll(() => page.evaluate(() => document.activeElement?.closest("tbody") != null))
+      .toBe(true);
+    await expect.poll(() => contents(page, to)).toEqual([videos[1]!.id]);
+    expect(await contents(page, from)).toEqual([videos[0]!.id, videos[2]!.id]);
+    await page.getByRole("button", { name: "Undo", exact: true }).last().click();
+    await expect.poll(() => contents(page, from)).toEqual(videos.map((v) => v.id));
+    expect(await contents(page, to)).toEqual([]);
+  });
+
+  test("a selected row carries the selected ones, named on the drag image", async ({
+    page,
+  }, info) => {
+    const { videos, from, to, target } = await setUp(
+      page,
+      `drag many ${info.project.name}`,
+      info.project.name,
+    );
+    await page.getByRole("checkbox", { name: videos[0]!.title, exact: false }).click();
+    await page.getByRole("checkbox", { name: videos[2]!.title, exact: false }).click();
+    const grip = page.getByRole("button", { name: `Reorder “${videos[2]!.title}”`, exact: false });
+    await carryToRail(page, grip, target);
+    const image = page.getByText("2 videos", { exact: true });
+    await expect(image).toBeVisible();
+    // Below the pointer, so it leaves the list's name to read.
+    const { y } = await centre(target);
+    expect((await image.boundingBox())!.y).toBeGreaterThan(y);
+    await page.mouse.up();
+    await expect.poll(() => contents(page, to)).toEqual([videos[0]!.id, videos[2]!.id]);
+    expect(await contents(page, from)).toEqual([videos[1]!.id]);
+    await expect(page.getByRole("checkbox", { name: "Select all" })).not.toBeChecked();
+  });
+
+  test("many rows dropped inside the list stay as they were", async ({ page }, info) => {
+    const { videos, from } = await setUp(
+      page,
+      `drag inside ${info.project.name}`,
+      info.project.name,
+    );
+    await page.getByRole("checkbox", { name: videos[0]!.title, exact: false }).click();
+    await page.getByRole("checkbox", { name: videos[1]!.title, exact: false }).click();
+    const grip = page.getByRole("button", { name: `Reorder “${videos[0]!.title}”`, exact: false });
+    await carry(page, grip, await centre(page.locator("tbody tr").nth(2)));
+    await page.mouse.up();
+    await expect(page.locator("tbody tr")).toHaveCount(3);
+    expect(await contents(page, from)).toEqual(videos.map((v) => v.id));
+  });
+
+  test("one row dropped inside the list takes the new place", async ({ page }, info) => {
+    const { videos, from } = await setUp(
+      page,
+      `drag order ${info.project.name}`,
+      info.project.name,
+    );
+    const grip = page.getByRole("button", { name: `Reorder “${videos[0]!.title}”`, exact: false });
+    await carry(page, grip, await centre(page.locator("tbody tr").nth(2)));
+    await said(page, /position 3/);
+    await page.mouse.up();
+    await expect
+      .poll(() => contents(page, from))
+      .toEqual([videos[1]!.id, videos[2]!.id, videos[0]!.id]);
+  });
+
+  test("Escape puts the drag down, with nothing moved and nothing lit", async ({ page }, info) => {
+    const { videos, from, to, target } = await setUp(
+      page,
+      `drag cancel ${info.project.name}`,
+      info.project.name,
+    );
+    const grip = page.getByRole("button", { name: `Reorder “${videos[0]!.title}”`, exact: false });
+    await carryToRail(page, grip, target);
+    await expect(target).toHaveClass(/ring-2/);
+    await page.keyboard.press("Escape");
+    await expect(target).not.toHaveClass(/ring-2/);
+    await page.mouse.up();
+    expect(await contents(page, from)).toEqual(videos.map((v) => v.id));
+    expect(await contents(page, to)).toEqual([]);
+  });
+
+  test("a key still reorders a row, alone", async ({ page }, info) => {
+    const { videos, from } = await setUp(page, `drag key ${info.project.name}`, info.project.name);
+    await page.getByRole("checkbox", { name: videos[0]!.title, exact: false }).click();
+    await page.getByRole("checkbox", { name: videos[2]!.title, exact: false }).click();
+    await page.getByRole("button", { name: `Reorder “${videos[0]!.title}”`, exact: false }).focus();
+    await page.keyboard.press("Space");
+    await said(page, /picked up/i);
+    await page.keyboard.press("ArrowDown");
+    await said(page, /position 2/);
+    await page.keyboard.press("Space");
+    await expect
+      .poll(() => contents(page, from))
+      .toEqual([videos[1]!.id, videos[0]!.id, videos[2]!.id]);
+  });
+
+  test("under a filter a row still goes to another list, and none is reordered", async ({
+    page,
+  }, info) => {
+    const { videos, from, to, target } = await setUp(
+      page,
+      `drag filter ${info.project.name}`,
+      info.project.name,
+    );
+    await page.getByRole("columnheader", { name: "Title" }).getByRole("button").last().click();
+    await page.getByPlaceholder("Title").fill(videos[1]!.title);
+    await page.keyboard.press("Escape");
+    await expect(page.locator("tbody tr")).toHaveCount(1);
+    const grip = page.getByRole("button", {
+      name: `Drag “${videos[1]!.title}” onto a list`,
+      exact: false,
+    });
+    await carryToRail(page, grip, target);
+    await page.mouse.up();
+    await expect.poll(() => contents(page, to)).toEqual([videos[1]!.id]);
+    expect(await contents(page, from)).toEqual([videos[0]!.id, videos[2]!.id]);
+  });
+
+  test("the rail scrolls while the drag holds at its edge", async ({ page }, info) => {
+    const name = `drag scroll ${info.project.name}`;
+    for (let i = 0; i < 12; i++) await newList(page, `${name} ${String(i)}`);
+    await page.setViewportSize({ width: 1280, height: 520 });
+    const { videos } = await setUp(page, name, info.project.name);
+    const grip = page.getByRole("button", { name: `Reorder “${videos[0]!.title}”`, exact: false });
+    const area = page.locator("[data-playlist-drop-area]");
+    await carryToRail(page, grip, area.locator("[data-playlist-drop]").first());
+    const scroller = () =>
+      area.evaluate((el) => {
+        for (let p = el.parentElement; p; p = p.parentElement) {
+          const { overflowY } = getComputedStyle(p);
+          if ((overflowY === "auto" || overflowY === "scroll") && p.scrollHeight > p.clientHeight) {
+            const { left, right, bottom } = p.getBoundingClientRect();
+            return { top: p.scrollTop, x: (left + right) / 2, bottom };
+          }
+        }
+        return { top: -1, x: 0, bottom: 0 };
+      });
+    const before = await scroller();
+    expect(before.top).toBeGreaterThanOrEqual(0);
+    await page.mouse.move(before.x, before.bottom - 8, { steps: 4 });
+    await expect.poll(async () => (await scroller()).top).toBeGreaterThan(before.top);
+    await page.keyboard.press("Escape");
+  });
+});
diff --git a/frontend/src/i18n/locales/en/playlists.json b/frontend/src/i18n/locales/en/playlists.json
index 4ed5ee13..11c3a4a0 100644
--- a/frontend/src/i18n/locales/en/playlists.json
+++ b/frontend/src/i18n/locales/en/playlists.json
@@ -122,6 +122,11 @@
   "undoMoveFailed": "Couldn't move the video back",
   "undoMoveManyFailed": "Couldn't move the videos back",
   "undoRemoveManyFailed": "Couldn't put the videos back",
+  "dragHandleToList": "Drag “{{title}}” onto a list",
+  "dragPickedMany_one": "{{count}} video picked up",
+  "dragPickedMany_other": "{{count}} videos picked up",
+  "dragOverList": "Over “{{name}}”",
+  "dragDroppedOnList": "Dropped on “{{name}}”",
   "dragBlockedSort": "Reordering by hand is off while a column sort or grouping is applied.",
   "dragBlockedFilter": "Reordering by hand is off while a filter is applied.",
   "clearView": "Reset view",
diff --git a/frontend/src/i18n/locales/hu/playlists.json b/frontend/src/i18n/locales/hu/playlists.json
index 93f6c261..0e737f07 100644
--- a/frontend/src/i18n/locales/hu/playlists.json
+++ b/frontend/src/i18n/locales/hu/playlists.json
@@ -122,6 +122,11 @@
   "undoMoveFailed": "Nem sikerült visszahelyezni a videót",
   "undoMoveManyFailed": "Nem sikerült visszahelyezni a videókat",
   "undoRemoveManyFailed": "Nem sikerült visszatenni a videókat",
+  "dragHandleToList": "„{{title}}” húzása egy listára",
+  "dragPickedMany_one": "{{count}} videó felvéve",
+  "dragPickedMany_other": "{{count}} videó felvéve",
+  "dragOverList": "A(z) „{{name}}” lista fölött",
+  "dragDroppedOnList": "Letéve a(z) „{{name}}” listára",
   "dragBlockedSort": "A kézi átrendezés ki van kapcsolva, amíg oszloprendezés vagy csoportosítás van érvényben.",
   "dragBlockedFilter": "A kézi átrendezés ki van kapcsolva, amíg szűrő van érvényben.",
   "clearView": "Nézet visszaállítása",
diff --git a/frontend/src/lib/listNav.select.dom.test.tsx b/frontend/src/lib/listNav.select.dom.test.tsx
index 388ca702..6960d972 100644
--- a/frontend/src/lib/listNav.select.dom.test.tsx
+++ b/frontend/src/lib/listNav.select.dom.test.tsx
@@ -5,7 +5,7 @@
 import { useRef } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import { navItemAttrs, useListNav, type NavSelection } from "./listNav";
+import { followRemoval, navItemAttrs, useListNav, type NavSelection } from "./listNav";
 import { useActiveScopes } from "./keymap";
 
 afterEach(cleanup);
@@ -115,6 +115,27 @@ describe("useListNav · selecting", () => {
     expect(idle.clear).toHaveBeenCalledTimes(1);
   });
 
+  it("takes the slot of an item that left by other hands, the focus on <body>", async () => {
+    render(<Rows />);
+    const leaving = screen.getByTestId("r1");
+    followRemoval(screen.getByTestId("r1-action"));
+    const list = leaving.parentElement!;
+    list.removeChild(leaving);
+    list.querySelector<HTMLElement>("[data-testid=r2]")!.setAttribute("data-nav-index", "1");
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByTestId("r2")));
+  });
+
+  it("leaves the focus where it is when something else took it meanwhile", async () => {
+    render(<Rows />);
+    const leaving = screen.getByTestId("r1");
+    const other = screen.getByTestId("r0-input");
+    other.focus();
+    followRemoval(screen.getByTestId("r1-action"));
+    leaving.remove();
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.activeElement).toBe(other);
+  });
+
   it("has Delete go to the selection first, wherever the focus is", () => {
     const s = selection();
     s.removeSelected.mockReturnValue(true);
diff --git a/frontend/src/lib/listNav.ts b/frontend/src/lib/listNav.ts
index 289bfaf8..00d5bde2 100644
--- a/frontend/src/lib/listNav.ts
+++ b/frontend/src/lib/listNav.ts
@@ -493,6 +493,16 @@ function refocusSlot(list: NavList, index: number, removed: HTMLElement): void {
   requestAnimationFrame(wait);
 }
 
+/** The item holding `el` is leaving its list by other hands than Delete (a drag out of it): the focus
+ *  takes its slot all the same, not <body>. By element, as a click on a button leaves the focus
+ *  elsewhere in Safari. */
+export function followRemoval(el: Element): void {
+  const item = el.closest<HTMLElement>(`[${INDEX}]`);
+  const list =
+    item && lists.get(item.parentElement?.closest<HTMLElement>(`[${LIST}]`) as HTMLElement);
+  if (item && list) refocusSlot(list, indexOf(item), item);
+}
+
 // ── The item a view was left from ────────────────────────────────────────────────────────────────
 // Opening something that switches the page or the view — a Plex title from Home's rail, a channel from
 // the Channels table — unmounts the list the keyboard was on, so Back used to hand focus to <body> and
diff --git a/frontend/src/modules/playlists/Playlists.dom.test.tsx b/frontend/src/modules/playlists/Playlists.dom.test.tsx
index d2aabb4d..808994fc 100644
--- a/frontend/src/modules/playlists/Playlists.dom.test.tsx
+++ b/frontend/src/modules/playlists/Playlists.dom.test.tsx
@@ -28,6 +28,21 @@ const h = vi.hoisted(() => ({
   },
 }));
 
+// The real drag context, with its props in reach: jsdom lays nothing out for a real pointer to drag
+// across (e2e/playlists.spec.ts does that).
+const dnd = vi.hoisted(() => ({ props: null as unknown as Record<string, any> })); // eslint-disable-line @typescript-eslint/no-explicit-any -- what dnd-kit passes its handlers, which these tests build by hand
+vi.mock("@dnd-kit/core", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@dnd-kit/core")>();
+  const { createElement } = await import("react");
+  return {
+    ...actual,
+    DndContext: (props: Record<string, unknown>) => {
+      dnd.props = props;
+      return createElement(actual.DndContext, props);
+    },
+  };
+});
+
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return {
@@ -88,6 +103,7 @@ vi.mock("../../features/player/PlayerModal", async () => {
   };
 });
 
+import { railDropAreaAttrs, railDropAttrs, railDropTarget, stopRailDrag } from "./railDrop";
 import Playlists from "./Playlists";
 import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
 import { PageMenuSlot, type PageMenuOpener } from "../../components/ui/pageMenuSlot";
@@ -1171,6 +1187,306 @@ describe("Playlists — the list's name keeps its room on a narrow window", () =
   });
 });
 
+describe("Playlists — dragging rows", () => {
+  beforeEach(() => void vi.spyOn(api, "savePrefs").mockResolvedValue({} as never));
+  afterEach(() => {
+    stopRailDrag();
+    document.querySelectorAll("[data-test-rail]").forEach((el) => el.remove());
+  });
+
+  const abc: Record<number, Video[]> = { 1: [vid("A", 0), vid("B", 0), vid("C", 0)], 2: [] };
+  const box = (title: string) =>
+    screen.findByRole("checkbox", { name: `playlists.selectRow:${title}` });
+  const tick = async (...titles: string[]) => {
+    for (const title of titles) fireEvent.click(await box(title));
+  };
+  const moved = (ids: string[]) => ({
+    ok: true,
+    from_playlist_id: 1,
+    to_playlist_id: 2,
+    moved: ids,
+    already_there: [],
+  });
+  const pointer = { clientX: 10, clientY: 10 } as unknown as Event;
+  const key = new KeyboardEvent("keydown", { key: " " });
+  const pickUp = (id: string, activatorEvent: Event = pointer) =>
+    act(() => {
+      dnd.props.onDragStart({ active: { id }, activatorEvent });
+    });
+  const dropOn = (id: string, over: string | null = null) =>
+    act(() => {
+      dnd.props.onDragEnd({ active: { id }, over: over && { id: over }, activatorEvent: pointer });
+    });
+  const aRow = (id: string) => screen.findByText(`Video ${id}`);
+  /** The pointer lying over this rail row of another tree. */
+  const overRail = (id: number | null) => {
+    const area = document.createElement("div");
+    area.dataset.testRail = "";
+    for (const [k, v] of Object.entries(railDropAreaAttrs)) area.setAttribute(k, v);
+    const row = document.createElement("div");
+    if (id != null)
+      for (const [k, v] of Object.entries(railDropAttrs(id))) row.setAttribute(k, String(v));
+    area.append(row);
+    document.body.append(area);
+    document.elementsFromPoint = () => [row];
+  };
+  const overNothing = () => {
+    document.elementsFromPoint = () => [];
+  };
+  const collide = () =>
+    dnd.props.collisionDetection({
+      active: { id: "A" },
+      collisionRect: { top: 0, left: 0, width: 10, height: 10, bottom: 10, right: 10 },
+      droppableRects: new Map([
+        ["B", { top: 0, left: 0, width: 10, height: 10, bottom: 10, right: 10 }],
+      ]),
+      droppableContainers: [{ id: "B" }],
+      pointerCoordinates: null,
+    });
+
+  it("moves a row dropped on another list, and leaves the ticks on the others alone", async () => {
+    const move = vi.spyOn(api, "moveManyToPlaylist").mockResolvedValue(moved(["B"]) as never);
+    mount(abc);
+    await tick("Video A");
+    overRail(2);
+    pickUp("B");
+    dropOn("B");
+    await waitFor(() => expect(move).toHaveBeenCalled());
+    expect(move.mock.calls[0]![1]).toEqual(["B"]);
+    expect(move.mock.calls[0]![2]).toBe(2);
+    expect(((await box("Video A")) as HTMLInputElement).checked).toBe(true);
+  });
+
+  it("carries every selected row with a selected one, and clears the selection", async () => {
+    const move = vi.spyOn(api, "moveManyToPlaylist").mockResolvedValue(moved(["A", "C"]) as never);
+    mount(abc);
+    await tick("Video C", "Video A");
+    overRail(2);
+    pickUp("C");
+    dropOn("C");
+    await waitFor(() => expect(move).toHaveBeenCalled());
+    expect([...move.mock.calls[0]![1]].sort()).toEqual(["A", "C"]);
+    expect(screen.queryByText("playlists.selectedCount")).toBeNull();
+  });
+
+  it("dims the rows going along while the drag lasts", async () => {
+    mount(abc);
+    await tick("Video A", "Video B");
+    overNothing();
+    const rowOf = async (id: string) => (await aRow(id)).closest("tr")!;
+    pickUp("A");
+    expect((await rowOf("B")).style.opacity).toBe("0.6");
+    expect((await rowOf("C")).style.opacity).toBe("1");
+    act(() => {
+      dnd.props.onDragCancel();
+    });
+    expect((await rowOf("B")).style.opacity).toBe("1");
+  });
+
+  it("does nothing with many rows dropped inside the list", async () => {
+    const order = vi.spyOn(api, "reorderPlaylist").mockResolvedValue({} as never);
+    const move = vi.spyOn(api, "moveManyToPlaylist");
+    mount(abc);
+    await tick("Video A", "Video B");
+    overNothing();
+    pickUp("A");
+    expect(collide()).toEqual([]);
+    dropOn("A");
+    await new Promise((r) => setTimeout(r, 20));
+    expect(order).not.toHaveBeenCalled();
+    expect(move).not.toHaveBeenCalled();
+    expect(((await box("Video A")) as HTMLInputElement).checked).toBe(true);
+  });
+
+  it("reorders one row inside the list, a selected one alone too", async () => {
+    const order = vi.spyOn(api, "reorderPlaylist").mockResolvedValue({} as never);
+    mount(abc);
+    await tick("Video A");
+    overNothing();
+    pickUp("A");
+    expect(collide().length).toBeGreaterThan(0);
+    dropOn("A", "C");
+    await waitFor(() => expect(order).toHaveBeenCalled());
+    expect(order.mock.calls[0]![1]).toEqual(["B", "C", "A"]);
+  });
+
+  it("lands a pointer drag on the row under the pointer, whatever the drag image's box", async () => {
+    mount(abc);
+    await aRow("A");
+    overNothing();
+    pickUp("A");
+    const box = (top: number) => ({
+      top,
+      left: 0,
+      width: 10,
+      height: 50,
+      bottom: top + 50,
+      right: 10,
+    });
+    const hit = dnd.props.collisionDetection({
+      active: { id: "A" },
+      collisionRect: { top: 60, left: 0, width: 10, height: 10, bottom: 70, right: 10 },
+      droppableRects: new Map([
+        ["B", box(50)],
+        ["C", box(100)],
+      ]),
+      droppableContainers: [{ id: "B" }, { id: "C" }],
+      pointerCoordinates: { x: 5, y: 125 },
+    });
+    expect(hit[0].id).toBe("C");
+  });
+
+  it("makes the rows give no way while the drag is over the rail, even over the open list", async () => {
+    mount(abc);
+    await aRow("A");
+    overRail(null);
+    pickUp("A");
+    expect(collide()).toEqual([]);
+  });
+
+  it("moves nothing dropped on the rail's open list, though it is in the rail", async () => {
+    const order = vi.spyOn(api, "reorderPlaylist").mockResolvedValue({} as never);
+    const move = vi.spyOn(api, "moveManyToPlaylist");
+    mount(abc);
+    await aRow("A");
+    overRail(null);
+    pickUp("A");
+    dropOn("A");
+    await new Promise((r) => setTimeout(r, 20));
+    expect(move).not.toHaveBeenCalled();
+    expect(order).not.toHaveBeenCalled();
+  });
+
+  it("moves nothing for a row of a list that has gone by the drop", async () => {
+    const move = vi.spyOn(api, "moveManyToPlaylist");
+    mount(abc);
+    await aRow("A");
+    overRail(99);
+    pickUp("A");
+    dropOn("A");
+    await new Promise((r) => setTimeout(r, 20));
+    expect(move).not.toHaveBeenCalled();
+  });
+
+  it("keeps out of the rail when a key lifted the row, which also carries only itself", async () => {
+    mount(abc);
+    await tick("Video A", "Video B");
+    overRail(2);
+    pickUp("A", key);
+    expect(railDropTarget()).toBeNull();
+    // The row walks by itself, with no drag image and none going along.
+    expect((await aRow("B")).closest("tr")!.style.opacity).toBe("1");
+    expect(collide().length).toBeGreaterThan(0);
+  });
+
+  it("leaves the rail on a cancel, moving nothing", async () => {
+    const move = vi.spyOn(api, "moveManyToPlaylist");
+    mount(abc);
+    await aRow("A");
+    overRail(2);
+    pickUp("A");
+    expect(railDropTarget()).toBe(2);
+    act(() => {
+      dnd.props.onDragCancel();
+    });
+    expect(railDropTarget()).toBeNull();
+    expect(move).not.toHaveBeenCalled();
+  });
+
+  describe("under a sort or a filter", () => {
+    const filter = async (value: string) => {
+      fireEvent.click(screen.getAllByRole("button", { name: "datatable.filter" })[0]!);
+      fireEvent.change(await screen.findByPlaceholderText("playlists.colTitle"), {
+        target: { value },
+      });
+      await screen.findByRole("button", { name: "playlists.clearView" });
+    };
+
+    it("still lets a row go to another list, and says so on the grip", async () => {
+      const move = vi.spyOn(api, "moveManyToPlaylist").mockResolvedValue(moved(["A"]) as never);
+      mount(abc);
+      await aRow("A");
+      await filter("Video");
+      const grip = await screen.findByRole("button", {
+        name: "playlists.dragHandleToList:Video A",
+      });
+      expect(grip.getAttribute("aria-disabled")).not.toBe("true");
+      overRail(2);
+      pickUp("A");
+      dropOn("A");
+      await waitFor(() => expect(move).toHaveBeenCalled());
+      expect(move.mock.calls[0]![1]).toEqual(["A"]);
+    });
+
+    it("reorders nothing in the list, and offers no key to lift a row with", async () => {
+      const order = vi.spyOn(api, "reorderPlaylist").mockResolvedValue({} as never);
+      mount(abc);
+      await aRow("A");
+      expect(dnd.props.sensors).toHaveLength(2);
+      await filter("Video");
+      expect(dnd.props.sensors).toHaveLength(1);
+      overNothing();
+      pickUp("A");
+      expect(collide()).toEqual([]);
+      dropOn("A");
+      await new Promise((r) => setTimeout(r, 20));
+      expect(order).not.toHaveBeenCalled();
+    });
+
+    it("explains the grip with no other list to go to", async () => {
+      mount({ 1: abc[1]! });
+      await aRow("A");
+      await filter("Video");
+      const grips = await screen.findAllByRole("button", { name: "playlists.dragBlockedFilter" });
+      expect(grips).toHaveLength(3);
+    });
+  });
+
+  describe("what a screen reader hears", () => {
+    const say = () => dnd.props.accessibility.announcements;
+
+    it("names how many are picked up, and the list under the drag", async () => {
+      mount(abc);
+      await tick("Video A", "Video B");
+      overRail(2);
+      pickUp("A");
+      expect(say().onDragStart({ active: { id: "A" } })).toBe("playlists.dragPickedMany");
+      expect(say().onDragMove({ active: { id: "A" } })).toBe("playlists.dragOverList");
+    });
+
+    it("says nothing about a list while the drag is off the rail", async () => {
+      mount(abc);
+      await aRow("A");
+      overNothing();
+      pickUp("A");
+      expect(say().onDragMove({ active: { id: "A" } })).toBeUndefined();
+    });
+
+    it("says where it landed, not that it was cancelled", async () => {
+      vi.spyOn(api, "moveManyToPlaylist").mockResolvedValue(moved(["A"]) as never);
+      mount(abc);
+      await aRow("A");
+      overRail(2);
+      pickUp("A");
+      dropOn("A");
+      expect(say().onDragEnd({ active: { id: "A" }, over: null })).toBe(
+        "playlists.dragDroppedOnList",
+      );
+    });
+
+    it("says it was cancelled for a drop that moved nothing", async () => {
+      mount(abc);
+      await aRow("A");
+      overNothing();
+      pickUp("A");
+      dropOn("A");
+      expect(say().onDragEnd({ active: { id: "A" }, over: null })).toContain(
+        "common.dnd.cancelled",
+      );
+    });
+  });
+});
+
 describe("Playlists — acting on the selected rows", () => {
   // A move remembers its target on the server, and an answer from nowhere would be the last toast.
   beforeEach(() => void vi.spyOn(api, "savePrefs").mockResolvedValue({} as never));
diff --git a/frontend/src/modules/playlists/Playlists.tsx b/frontend/src/modules/playlists/Playlists.tsx
index cd75360f..e4085b09 100644
--- a/frontend/src/modules/playlists/Playlists.tsx
+++ b/frontend/src/modules/playlists/Playlists.tsx
@@ -1,4 +1,5 @@
 import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useLatest, useStableCallback } from "../../lib/useLatest";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -19,9 +20,13 @@ import {
   KeyboardSensor,
   PointerSensor,
   closestCenter,
+  DragOverlay,
   useSensor,
   useSensors,
+  type CollisionDetection,
   type DragEndEvent,
+  type DragStartEvent,
+  type Modifier,
 } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -29,7 +34,7 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
+import { CSS, getEventCoordinates } from "@dnd-kit/utilities";
 import { Check, Eraser, FolderInput, History, ListPlus, Play, X } from "lucide-react";
 import { YouTubeIcon } from "../../lib/brandIcons";
 import {
@@ -73,7 +78,7 @@ import { usePlaylistActions } from "./usePlaylistActions";
 import { usePlaylists } from "./playlistsContext";
 import { railDefaultId } from "./playlistsInit";
 import { usePref } from "../../lib/usePref";
-import { navItemAttrs } from "../../lib/listNav";
+import { followRemoval, navItemAttrs } from "../../lib/listNav";
 import { ColumnHead } from "../../components/ui/tableHeader";
 import { alignClass } from "../../components/ui/tableAlign";
 import {
@@ -86,6 +91,7 @@ import {
 import { GRIP_KEY, playlistColumns, selectColumn } from "./playlistColumns";
 import { useSortableA11y, useSortableItem } from "../../components/ui/sortableA11y";
 import { DragHandle } from "../../components/ui/DragHandle";
+import { SURFACE } from "../../components/ui/surfaces";
 import { RowSelectBox } from "../../components/ui/RowSelectBox";
 import { useOrderItems } from "../../components/ui/useOrderItems";
 import { Input } from "../../components/ui/Input";
@@ -98,6 +104,7 @@ import { useCopyItems } from "../../components/ui/copyItems";
 import RemoteImage from "../../components/ui/RemoteImage";
 import PlaylistsHeader from "./PlaylistsHeader";
 import { SelectionBand } from "./SelectionBand";
+import { isOverRail, railDropTarget, startRailDrag, stopRailDrag } from "./railDrop";
 import clsx from "clsx";
 
 // The playlist detail is a HYBRID table: real sortable/filterable column headers over a
@@ -129,12 +136,39 @@ const moveTargetIcon = (pl: Playlist) =>
     <ListPlus className="w-4 h-4" />
   );
 
+/** A pointer drag lands where the pointer is. dnd-kit measures from the drag image, whose small
+ *  box has its centre elsewhere: on a tablet's taller rows a drop reached the row before. */
+function pointerFirst(args: Parameters<CollisionDetection>[0]): Parameters<CollisionDetection>[0] {
+  const at = args.pointerCoordinates;
+  if (!at) return args;
+  const { width, height } = args.collisionRect;
+  const left = at.x - width / 2;
+  const top = at.y - height / 2;
+  return {
+    ...args,
+    collisionRect: { width, height, left, top, right: left + width, bottom: top + height },
+  };
+}
+
+/** The drag image hangs below the pointer: on it, it covered the name of the list it was over. */
+const beneathPointer: Modifier = ({ activatorEvent, draggingNodeRect, transform }) => {
+  const at = activatorEvent && getEventCoordinates(activatorEvent);
+  if (!at || !draggingNodeRect) return transform;
+  return {
+    ...transform,
+    x: transform.x + at.x - draggingNodeRect.left + 12,
+    y: transform.y + at.y - draggingNodeRect.top + 16,
+  };
+};
+
 function Row({
   video,
   index,
   columns,
   selected,
+  carried,
   dragDisabled,
+  listDragOnly,
   dragHint,
   menuProps,
 }: {
@@ -143,7 +177,11 @@ function Row({
   index: number;
   columns: Column<Video>[];
   selected: boolean;
+  /** Going along with the row being dragged. */
+  carried: boolean;
   dragDisabled: boolean;
+  /** A drag can only leave for another list: the view holds the order, and no key reaches the rail. */
+  listDragOnly: boolean;
   dragHint: string;
   /** useContextMenu's trigger props. On the WHOLE row, not a handle: a right-click anywhere in the
    *  row opens the menu, the way a native list does. The row's own buttons keep their left-click
@@ -163,7 +201,7 @@ function Row({
         // No transition on the row being dragged: dnd-kit drives `transform` from the pointer, so
         // animating it makes the row trail the cursor. The others keep it for the reflow animation.
         transition: isDragging ? undefined : transition,
-        opacity: isDragging ? 0.6 : 1,
+        opacity: isDragging || carried ? 0.6 : 1,
       }}
       // transition-COLORS, not `transition` — the bare utility animates transform too, which is
       // the same lag by another route (150ms behind the pointer, on every row).
@@ -181,13 +219,20 @@ function Row({
         >
           {col.key === GRIP_KEY ? (
             // The one cell the column defs can't render: the handle needs this row's sortable
-            // attributes/listeners. Disabled (not hidden) under a view, so the affordance stays
-            // put and can explain itself instead of silently doing nothing.
+            // attributes/listeners. Disabled (not hidden) with nowhere to go, so the affordance
+            // stays put and can explain itself instead of silently doing nothing.
             <DragHandle
               {...attributes}
+              aria-describedby={listDragOnly ? undefined : attributes["aria-describedby"]}
               {...(dragDisabled ? {} : listeners)}
               unavailable={dragDisabled}
-              label={dragDisabled ? dragHint : t("playlists.dragHandleOf", { title: video.title })}
+              label={
+                dragDisabled
+                  ? dragHint
+                  : t(listDragOnly ? "playlists.dragHandleToList" : "playlists.dragHandleOf", {
+                      title: video.title,
+                    })
+              }
             />
           ) : (
             col.render(video)
@@ -522,6 +567,8 @@ function PlaylistDetail() {
     // The grip was focusable and called itself "reorder", but only a pointer could move it.
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
+  // Under a view a key would pick the row up with nowhere to put it: only the rail is left to go to.
+  const pointerSensorOnly = sensors.slice(0, 1);
 
   // Named and placed from `shownRef`, read at announcement time (see ui/sortableA11y).
   const dndA11y = useSortableA11y((id) => {
@@ -540,8 +587,53 @@ function PlaylistDetail() {
     qc.invalidateQueries({ queryKey: qk.playlist(listId) });
   }
 
+  /** The rows on the drag image. A selected row carries the others; a key moves only its own row. */
+  const [carried, setCarried] = useState<readonly string[] | null>(null);
+  const carriedRef = useRef<readonly string[]>([]);
+  const droppedOnRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      stopRailDrag();
+    },
+    [],
+  );
+
+  function onDragStart(e: DragStartEvent) {
+    const id = String(e.active.id);
+    const from = "clientX" in e.activatorEvent ? (e.activatorEvent as PointerEvent) : null;
+    const rows =
+      from && selection.isSelected(id) && selection.shownSelected.length > 1
+        ? selection.shownSelected
+        : [id];
+    carriedRef.current = rows;
+    droppedOnRef.current = null;
+    // No drag image for a key: it leaves nothing to carry, and the row itself walks the list.
+    if (from) {
+      setCarried(rows);
+      startRailDrag(from.clientX, from.clientY);
+    }
+  }
+
+  function onDragCancel() {
+    stopRailDrag();
+    setCarried(null);
+  }
+
   function onDragEnd(e: DragEndEvent) {
     const { active: a, over } = e;
+    const droppedOn = stopRailDrag();
+    setCarried(null);
+    droppedOnRef.current = droppedOn;
+    if (droppedOn != null) {
+      const target = moveTargets.find((p) => p.id === droppedOn);
+      const row = shown.find((v) => v.id === a.id);
+      if (!target || !row) return;
+      if (e.activatorEvent.target instanceof Element) followRemoval(e.activatorEvent.target);
+      if (selection.isSelected(row.id)) moveSelected(target);
+      else void moveRows([row], target);
+      return;
+    }
+    // A collision reports nothing under a view or for many rows, so nothing is reordered there.
     if (!over || a.id === over.id || selectedId == null) return;
     const oldIndex = items.findIndex((v) => v.id === a.id);
     const newIndex = items.findIndex((v) => v.id === over.id);
@@ -948,6 +1040,38 @@ function PlaylistDetail() {
   // at, which is not a move at all. Nothing to explain, so nothing to leave behind greyed out.
   const recentMoveTarget = moveTargets.find((p) => p.id === lastMoveTargetId);
   const storedOrderEditable = canEdit && !viewActive;
+  // While the rows must stay put the others make no way: no row is "over" anything.
+  const dragCollision: CollisionDetection = (args) =>
+    storedOrderEditable && carriedRef.current.length <= 1 && !isOverRail()
+      ? closestCenter(pointerFirst(args))
+      : [];
+  const listNameOf = useLatest((id: number | null) => {
+    const list = moveTargets.find((p) => p.id === id);
+    return list ? plName(list) : "";
+  });
+  const dragA11y = useMemo(() => {
+    const base = dndA11y.announcements;
+    return {
+      ...dndA11y,
+      announcements: {
+        ...base,
+        onDragStart: (args: Parameters<typeof base.onDragStart>[0]) =>
+          carriedRef.current.length > 1
+            ? t("playlists.dragPickedMany", { count: carriedRef.current.length })
+            : base.onDragStart(args),
+        onDragMove: () => {
+          const id = railDropTarget();
+          return id == null
+            ? undefined
+            : t("playlists.dragOverList", { name: listNameOf.current(id) });
+        },
+        onDragEnd: (args: Parameters<typeof base.onDragEnd>[0]) =>
+          droppedOnRef.current == null
+            ? base.onDragEnd(args)
+            : t("playlists.dragDroppedOnList", { name: listNameOf.current(droppedOnRef.current) }),
+      },
+    };
+  }, [dndA11y, t, listNameOf]);
   const ctxRow = rowMenu.target;
   const ctxItems: ActionMenuItem[] = !ctxRow
     ? []
@@ -1353,12 +1477,16 @@ function PlaylistDetail() {
           </div>
         ) : (
           <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
+            sensors={viewActive ? pointerSensorOnly : sensors}
+            collisionDetection={dragCollision}
+            // Not the list, under a drag that is over the rail: it would run away beside it.
+            autoScroll={{ canScroll: () => !isOverRail() }}
+            onDragStart={onDragStart}
             onDragEnd={onDragEnd}
+            onDragCancel={onDragCancel}
             // dnd-kit's defaults are hardcoded English. They were harmless while only a pointer could
             // drag; now that the keyboard can, they ARE the instructions for the feature.
-            accessibility={dndA11y}
+            accessibility={dragA11y}
           >
             {/* Not clipped, so the header's filter popovers can overflow the table box. A container,
               so a narrow column hides by the table's width, not the window's (`narrowHidden`). */}
@@ -1426,7 +1554,9 @@ function PlaylistDetail() {
                         video={v}
                         columns={tableColumns}
                         selected={selection.isSelected(v.id)}
-                        dragDisabled={!canEdit || viewActive}
+                        carried={!!carried && carried.includes(v.id)}
+                        dragDisabled={!canEdit || (viewActive && !moveTargets.length)}
+                        listDragOnly={viewActive}
                         dragHint={dragHint}
                         menuProps={rowMenu.triggerProps(v)}
                       />
@@ -1440,6 +1570,28 @@ function PlaylistDetail() {
                 </div>
               )}
             </div>
+            {/* On <body>: the page's scroller contains anything fixed, and the rail lies outside it.
+              Above every layer (the tooltip's level), and no way back to fly: it drops or stays. Out
+              of the pointer's way: lying under it, it kept the rail's tab from peeking open. */}
+            {createPortal(
+              <DragOverlay
+                dropAnimation={null}
+                zIndex={100}
+                className="pointer-events-none"
+                modifiers={[beneathPointer]}
+              >
+                {carried && (
+                  <div
+                    className={`${SURFACE.popover} w-fit max-w-xs truncate px-3 py-2 text-sm font-medium`}
+                  >
+                    {carried.length > 1
+                      ? t("playlists.itemCount", { count: carried.length })
+                      : shown.find((v) => v.id === carried[0])?.title}
+                  </div>
+                )}
+              </DragOverlay>,
+              document.body,
+            )}
           </DndContext>
         )}
 
diff --git a/frontend/src/modules/playlists/PlaylistsRail.drop.dom.test.tsx b/frontend/src/modules/playlists/PlaylistsRail.drop.dom.test.tsx
new file mode 100644
index 00000000..f308cf54
--- /dev/null
+++ b/frontend/src/modules/playlists/PlaylistsRail.drop.dom.test.tsx
@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+//
+// The rail's rows as targets of a drag that starts in another tree: which ones are, and the one lit up.
+import { describe, it, expect, vi, afterEach, beforeAll } from "vitest";
+import { render, screen, cleanup, act } from "@testing-library/react";
+import { FloatingTree } from "@floating-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+vi.mock("../../lib/useRail", () => ({
+  useRail: () => ({
+    layout: { order: ["manage", "list"], collapsed: {}, hidden: {} },
+    setLayout: () => {},
+    collapsed: false,
+    onToggleCollapse: () => {},
+  }),
+}));
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }) };
+});
+vi.mock("./playlistsContext", () => ({
+  usePlaylists: () => ({ search: "", selectedId: 1 }),
+  usePlaylistsActions: () => ({ setSelectedId: vi.fn() }),
+}));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ can_write: true }) }));
+vi.mock("../../features/comfort/comfortPin", () => ({
+  useComfortPin: () => ({ item: () => [] }),
+  pinPlaylist: (id: number) => id,
+}));
+vi.mock("../../components/ui/confirmContext", () => ({
+  useChoice: () => async () => null,
+  useConfirm: () => async () => false,
+}));
+vi.mock("../../components/ui/FilterRail", () => ({
+  default: ({ items }: { items: { id: string; body: ReactNode }[] }) => (
+    <>
+      {items.map((i) => (
+        <div key={i.id}>{i.body}</div>
+      ))}
+    </>
+  ),
+}));
+
+import PlaylistsRail from "./PlaylistsRail";
+import { api, type Playlist } from "../../lib/api";
+import { startRailDrag, stopRailDrag } from "./railDrop";
+
+beforeAll(() => {
+  class Stub {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return [];
+    }
+  }
+  globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
+  globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
+  Element.prototype.scrollIntoView ??= () => {};
+});
+
+afterEach(() => {
+  stopRailDrag();
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const pl = (id: number, name: string) =>
+  ({
+    id,
+    name,
+    kind: "user",
+    source: "local",
+    yt_playlist_id: null,
+    item_count: 1,
+    total_duration_seconds: 0,
+    cover_thumbnail: null,
+    dirty: false,
+  }) as unknown as Playlist;
+
+async function mount() {
+  vi.spyOn(api, "playlists").mockResolvedValue([pl(1, "Open"), pl(2, "Other")] as never);
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(
+    <QueryClientProvider client={qc}>
+      <FloatingTree>
+        <PlaylistsRail />
+      </FloatingTree>
+    </QueryClientProvider>,
+  );
+  const wrap = async (name: string) =>
+    (await screen.findByText(name)).closest("[class*='group']") as HTMLElement;
+  return { open: await wrap("Open"), other: await wrap("Other") };
+}
+
+describe("PlaylistsRail — a row as a drop target", () => {
+  it("offers every row but the open list", async () => {
+    const { open, other } = await mount();
+    expect(other.getAttribute("data-playlist-drop")).toBe("2");
+    expect(open.hasAttribute("data-playlist-drop")).toBe(false);
+    expect(open.closest("[data-playlist-drop-area]")).toBeTruthy();
+  });
+
+  it("lights up the row under the drag, and only while it is", async () => {
+    const { open, other } = await mount();
+    document.elementsFromPoint = () => [other];
+    expect(other.className).not.toContain("ring-2");
+    act(() => {
+      startRailDrag(0, 0);
+    });
+    expect(other.className).toContain("ring-2");
+    expect(open.className).not.toContain("ring-2");
+    act(() => {
+      stopRailDrag();
+    });
+    expect(other.className).not.toContain("ring-2");
+  });
+});
diff --git a/frontend/src/modules/playlists/PlaylistsRail.tsx b/frontend/src/modules/playlists/PlaylistsRail.tsx
index c1d05aee..5be62d58 100644
--- a/frontend/src/modules/playlists/PlaylistsRail.tsx
+++ b/frontend/src/modules/playlists/PlaylistsRail.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { qk } from "../../lib/queryKeys";
+import clsx from "clsx";
 import { ListVideo, Pin, Plus, RefreshCw } from "lucide-react";
 import { YouTubeIcon } from "../../lib/brandIcons";
 import { api, type Playlist } from "../../lib/api";
@@ -32,6 +33,7 @@ import { Input } from "../../components/ui/Input";
 import { MoreButton } from "../../components/ui/MoreButton";
 import RemoteImage from "../../components/ui/RemoteImage";
 import { useRail } from "../../lib/useRail";
+import { railDropAreaAttrs, railDropAttrs, useRailDropTarget } from "./railDrop";
 
 type PlSort = {
   key: "custom" | "name" | "count" | "duration" | "recent";
@@ -55,6 +57,7 @@ export default function PlaylistsRail() {
   // The name filter + the selected playlist live in PlaylistsProvider (shared with the header search
   // box and the Playlists detail pane); this rail owns the list query + its own controls.
   const { search, selectedId } = usePlaylists();
+  const dropTarget = useRailDropTarget();
   const { setSelectedId } = usePlaylistsActions();
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -282,7 +285,7 @@ export default function PlaylistsRail() {
           {playlists.length > 0 && visiblePlaylists.length === 0 && (
             <div className="text-xs text-muted px-1 py-1">{t("playlists.noMatches")}</div>
           )}
-          <div className="space-y-1">
+          <div className="space-y-1" {...railDropAreaAttrs}>
             {visiblePlaylists.map((pl) =>
               renamingId === pl.id ? (
                 // The row becomes its own rename field. A <button> can't contain an <input>, so the
@@ -328,7 +331,16 @@ export default function PlaylistsRail() {
               ) : (
                 // `group`: the row's "…" shows on its hover or focus (`.reveal`), and always on touch.
                 // A sibling of the row button, not inside it — a button cannot hold a button.
-                <div key={pl.id} className="group relative" {...railMenu.triggerProps(pl)}>
+                // The open list is no target: the video is already there.
+                <div
+                  key={pl.id}
+                  className={clsx(
+                    "group relative rounded-lg",
+                    dropTarget === pl.id && "bg-accent/15 ring-2 ring-accent ring-inset",
+                  )}
+                  {...railMenu.triggerProps(pl)}
+                  {...(pl.id === selectedId ? {} : railDropAttrs(pl.id))}
+                >
                   <Pressable
                     selectable
                     ref={(el) => {
diff --git a/frontend/src/modules/playlists/railDrop.dom.test.ts b/frontend/src/modules/playlists/railDrop.dom.test.ts
new file mode 100644
index 00000000..2b307480
--- /dev/null
+++ b/frontend/src/modules/playlists/railDrop.dom.test.ts
@@ -0,0 +1,184 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  isOverRail,
+  railDropAreaAttrs,
+  railDropAttrs,
+  startRailDrag,
+  stopRailDrag,
+  useRailDropTarget,
+} from "./railDrop";
+
+// jsdom lays nothing out: what lies under a point is whatever the test says, by row id.
+let under: (x: number, y: number) => Element[] = () => [];
+let frames: FrameRequestCallback[] = [];
+const runFrame = () => {
+  const now = frames;
+  frames = [];
+  now.forEach((f) => f(0));
+};
+
+function rail() {
+  const scroller = document.createElement("div");
+  scroller.style.overflowY = "auto";
+  Object.defineProperty(scroller, "scrollHeight", { value: 2000 });
+  Object.defineProperty(scroller, "clientHeight", { value: 400 });
+  scroller.getBoundingClientRect = () =>
+    ({ left: 0, right: 200, top: 100, bottom: 500, width: 200, height: 400 }) as DOMRect;
+  const area = document.createElement("div");
+  for (const [k, v] of Object.entries(railDropAreaAttrs)) area.setAttribute(k, v);
+  const row = (id: number) => {
+    const el = document.createElement("div");
+    for (const [k, v] of Object.entries(railDropAttrs(id))) el.setAttribute(k, String(v));
+    area.append(el);
+    return el;
+  };
+  const open = document.createElement("div");
+  area.append(open);
+  scroller.append(area);
+  document.body.append(scroller);
+  return { scroller, area, open, row };
+}
+
+const moveTo = (x: number, y: number) =>
+  document.dispatchEvent(new MouseEvent("pointermove", { clientX: x, clientY: y }));
+
+beforeEach(() => {
+  under = () => [];
+  frames = [];
+  document.elementsFromPoint = (x, y) => under(x, y);
+  vi.stubGlobal("requestAnimationFrame", (f: FrameRequestCallback) => frames.push(f));
+  vi.stubGlobal("cancelAnimationFrame", () => {
+    frames = [];
+  });
+});
+
+afterEach(() => {
+  stopRailDrag();
+  document.body.replaceChildren();
+  vi.unstubAllGlobals();
+});
+
+describe("railDrop", () => {
+  it("says which row the pointer is over, through the drag image lying on top", () => {
+    const { row } = rail();
+    const image = document.createElement("div");
+    const r7 = row(7);
+    under = () => [image, r7];
+    const { result } = renderHook(() => useRailDropTarget());
+    expect(result.current).toBeNull();
+    act(() => {
+      startRailDrag(0, 0);
+    });
+    expect(result.current).toBe(7);
+    under = () => [];
+    act(() => {
+      moveTo(600, 300);
+    });
+    expect(result.current).toBeNull();
+  });
+
+  it("finds a row from its child, as the pointer lands on the row's cover", () => {
+    const { row } = rail();
+    const child = document.createElement("span");
+    row(3).append(child);
+    under = () => [child];
+    startRailDrag(0, 0);
+    expect(stopRailDrag()).toBe(3);
+  });
+
+  it("answers the last row on stop, and leaves no highlight or listener behind", () => {
+    const { row } = rail();
+    const r5 = row(5);
+    under = () => [r5];
+    const { result } = renderHook(() => useRailDropTarget());
+    act(() => {
+      startRailDrag(0, 0);
+    });
+    let dropped: number | null = null;
+    act(() => {
+      dropped = stopRailDrag();
+    });
+    expect(dropped).toBe(5);
+    expect(result.current).toBeNull();
+    act(() => {
+      moveTo(10, 10);
+    });
+    expect(result.current).toBeNull();
+    expect(stopRailDrag()).toBeNull();
+  });
+
+  it("tells the rail apart from a row: the open list is in the rail, though no target", () => {
+    const { open } = rail();
+    under = () => [open];
+    startRailDrag(0, 0);
+    expect(isOverRail()).toBe(true);
+    expect(stopRailDrag()).toBeNull();
+    expect(isOverRail()).toBe(false);
+  });
+
+  it("is not over the rail anywhere else on the page", () => {
+    rail();
+    const elsewhere = document.createElement("div");
+    document.body.append(elsewhere);
+    under = () => [elsewhere];
+    startRailDrag(0, 0);
+    expect(isOverRail()).toBe(false);
+  });
+
+  it("scrolls the rail while the pointer holds at its edge, and reads the row that came under it", () => {
+    const { scroller, row } = rail();
+    const r1 = row(1);
+    const r2 = row(2);
+    under = () => (scroller.scrollTop > 0 ? [r2] : [r1]);
+    const { result } = renderHook(() => useRailDropTarget());
+    act(() => {
+      startRailDrag(100, 300);
+    });
+    act(() => {
+      runFrame();
+    });
+    expect(scroller.scrollTop).toBe(0);
+    act(() => {
+      moveTo(100, 495);
+    });
+    act(() => {
+      runFrame();
+    });
+    expect(scroller.scrollTop).toBeGreaterThan(0);
+    expect(result.current).toBe(2);
+    const down = scroller.scrollTop;
+    act(() => {
+      moveTo(100, 105);
+    });
+    act(() => {
+      runFrame();
+    });
+    expect(scroller.scrollTop).toBeLessThan(down);
+  });
+
+  it("finds the rail that opened only during the drag, as an unpinned one peeks", () => {
+    startRailDrag(100, 495);
+    runFrame();
+    const { scroller } = rail();
+    runFrame();
+    expect(scroller.scrollTop).toBeGreaterThan(0);
+  });
+
+  it("does not scroll the rail for a pointer beside it, at the same height", () => {
+    const { scroller } = rail();
+    startRailDrag(600, 495);
+    runFrame();
+    expect(scroller.scrollTop).toBe(0);
+  });
+
+  it("stops scrolling on stop", () => {
+    const { scroller } = rail();
+    startRailDrag(100, 495);
+    stopRailDrag();
+    expect(frames).toHaveLength(0);
+    runFrame();
+    expect(scroller.scrollTop).toBe(0);
+  });
+});
diff --git a/frontend/src/modules/playlists/railDrop.ts b/frontend/src/modules/playlists/railDrop.ts
new file mode 100644
index 00000000..73f76d2d
--- /dev/null
+++ b/frontend/src/modules/playlists/railDrop.ts
@@ -0,0 +1,126 @@
+import { useSyncExternalStore } from "react";
+
+// Dragging a video onto a list in the rail. The rail and the page are separate React trees (the shell
+// mounts them side by side, each lazily), so no drag context reaches both: the page's drag reads the
+// rail by what lies under the pointer, and this says the answer to the rail's rows.
+//
+// The pointer is followed here rather than worked out from dnd-kit's `delta`: that one includes what
+// the list has scrolled during the drag, which is no distance on the screen.
+
+const RAIL_ROW = "data-playlist-drop";
+const RAIL_AREA = "data-playlist-drop-area";
+
+/** Marks a rail row as somewhere a drag can land. */
+export const railDropAttrs = (id: number) => ({ [RAIL_ROW]: id });
+/** Marks the rail's rows as a whole: over them a drag is out of the list, target or not. */
+export const railDropAreaAttrs = { [RAIL_AREA]: "" };
+
+/** How near the rail's edge the pointer scrolls it, and how fast at the very edge, per frame. */
+const EDGE = 48;
+const MAX_STEP = 12;
+
+let over: number | null = null;
+let inRail = false;
+let point: { x: number; y: number } | null = null;
+let frame = 0;
+let scroller: HTMLElement | null = null;
+const listeners = new Set<() => void>();
+
+function setOver(id: number | null) {
+  if (id === over) return;
+  over = id;
+  listeners.forEach((l) => l());
+}
+
+const subscribe = (l: () => void) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+};
+
+/** The rail row under the drag right now. */
+export const useRailDropTarget = (): number | null => useSyncExternalStore(subscribe, () => over);
+
+/** The same, outside React. */
+export const railDropTarget = (): number | null => over;
+
+/** Whether the drag is over the rail at all, where the list's rows must not make way for it. */
+export const isOverRail = (): boolean => inRail;
+
+function readRail() {
+  if (!point) return;
+  let row: number | null = null;
+  let area = false;
+  // `elementsFromPoint`, because the drag image lies on top.
+  for (const el of document.elementsFromPoint(point.x, point.y)) {
+    const hit = el.closest(`[${RAIL_ROW}]`);
+    if (hit) row = Number(hit.getAttribute(RAIL_ROW));
+    if (el.closest(`[${RAIL_AREA}]`)) area = true;
+    if (row != null) break;
+  }
+  inRail = area;
+  setOver(row);
+}
+
+function railScroller(): HTMLElement | null {
+  for (
+    let el = document.querySelector<HTMLElement>(`[${RAIL_AREA}]`)?.parentElement;
+    el;
+    el = el.parentElement
+  ) {
+    const { overflowY } = getComputedStyle(el);
+    if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight)
+      return el;
+  }
+  return null;
+}
+
+/** With 45 lists the row wanted is usually out of sight, and dnd-kit scrolls only what holds the
+ *  dragged row: not the rail. */
+function scrollStep() {
+  frame = requestAnimationFrame(scrollStep);
+  // Looked for again: an unpinned rail has no rows until the drag's own hover peeks it open.
+  if (!scroller?.isConnected) scroller = railScroller();
+  if (!point || !scroller) return;
+  const box = scroller.getBoundingClientRect();
+  if (point.x < box.left || point.x > box.right) return;
+  const fromTop = point.y - box.top;
+  const fromBottom = box.bottom - point.y;
+  const step =
+    fromTop < EDGE
+      ? -MAX_STEP * (1 - Math.max(fromTop, 0) / EDGE)
+      : fromBottom < EDGE
+        ? MAX_STEP * (1 - Math.max(fromBottom, 0) / EDGE)
+        : 0;
+  if (step === 0) return;
+  scroller.scrollTop += step;
+  readRail();
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  point = { x: e.clientX, y: e.clientY };
+  readRail();
+};
+
+/** Follows the pointer from where the drag began, until `stopRailDrag`. */
+export function startRailDrag(x: number, y: number): void {
+  stopRailDrag();
+  point = { x, y };
+  scroller = railScroller();
+  document.addEventListener("pointermove", onPointerMove, true);
+  frame = requestAnimationFrame(scrollStep);
+  readRail();
+}
+
+/** Ends the following, and answers the row the drag was over. Safe without a drag. */
+export function stopRailDrag(): number | null {
+  const last = over;
+  document.removeEventListener("pointermove", onPointerMove, true);
+  cancelAnimationFrame(frame);
+  point = null;
+  scroller = null;
+  inRail = false;
+  setOver(null);
+  return last;
+}