Reactで、付せんをドラッグして自由に動かす方法

import { useEffect, useRef } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

export type Note = { id: number; x: number; y: number; z: number; text: string; color: string };

type Drag = { id: number; offsetX: number; offsetY: number };

type Props = {
  notes: Note[];
  onChange: (notes: Note[]) => void;
  // ドラッグを終えて離したときと、矢印キーで動かしたときに呼ぶ（ドラッグ中は呼ばない）
  onDrop?: (notes: Note[]) => void;
};

const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);

export function NoteBoard({ notes, onChange, onDrop }: Props) {
  const boardRef = useRef<HTMLDivElement>(null);
  const drag = useRef<Drag | null>(null);
  // いちばん新しい付せんの一覧。props の notes はレンダリングした時点の値のままなので、
  // 同じハンドラーの中で変えたばかりの値を onDrop に渡せるように、ref にも持っておく
  const latest = useRef(notes);
  useEffect(() => { latest.current = notes; }, [notes]);

  // 付せんの左上を、ボードの中に収まる位置に直す
  function fit(x: number, y: number, el: HTMLElement) {
    const board = boardRef.current!;
    return {
      x: Math.round(clamp(x, 0, board.clientWidth - el.offsetWidth)),
      y: Math.round(clamp(y, 0, board.clientHeight - el.offsetHeight)),
    };
  }

  function update(id: number, patch: Partial<Note>) {
    const next = latest.current.map((n) => (n.id === id ? { ...n, ...patch } : n));
    latest.current = next;
    onChange(next);
  }

  // いちばん上に重ねる（z をいまの最大より 1 大きくする）
  function bringToFront(id: number) {
    const top = Math.max(...latest.current.map((n) => n.z));
    const note = latest.current.find((n) => n.id === id)!;
    if (note.z !== top) update(id, { z: top + 1 });
  }

  function handlePointerDown(e: PointerEvent<HTMLDivElement>, note: Note) {
    if (e.button !== 0) return;
    const board = boardRef.current!.getBoundingClientRect();
    // つかんだ位置と付せんの左上のずれ。これを保って動かすと、付せんが指の位置へ飛ばない
    drag.current = {
      id: note.id,
      offsetX: e.clientX - board.left - note.x,
      offsetY: e.clientY - board.top - note.y,
    };
    bringToFront(note.id);
    // ポインターがつまみの外へ出ても、離すまでこの要素にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d) return;
    const board = boardRef.current!.getBoundingClientRect();
    const el = e.currentTarget.parentElement!; // 付せん全体
    update(d.id, fit(e.clientX - board.left - d.offsetX, e.clientY - board.top - d.offsetY, el));
  }

  function handlePointerUp() {
    if (!drag.current) return;
    drag.current = null;
    onDrop?.(latest.current);
  }

  // 矢印キーで 10px ずつ動かす
  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>, note: Note) {
    const step = { ArrowLeft: [-10, 0], ArrowRight: [10, 0], ArrowUp: [0, -10], ArrowDown: [0, 10] }[e.key];
    if (!step) return;
    e.preventDefault();
    update(note.id, fit(note.x + step[0], note.y + step[1], e.currentTarget.parentElement!));
    onDrop?.(latest.current);
  }

  return (
    <div className="board" ref={boardRef}>
      {notes.map((note) => (
        <div
          key={note.id}
          className="note"
          data-id={note.id}
          style={{ transform: `translate(${note.x}px, ${note.y}px)`, zIndex: note.z, background: note.color }}
        >
          <div
            className="note-handle"
            tabIndex={0}
            role="button"
            aria-label={`付せん${note.id}を動かす（矢印キーでも動きます）`}
            onPointerDown={(e) => handlePointerDown(e, note)}
            onPointerMove={handlePointerMove}
            onPointerUp={handlePointerUp}
            onPointerCancel={handlePointerUp}
            onFocus={() => bringToFront(note.id)}
            onKeyDown={(e) => handleKeyDown(e, note)}
          />
          <textarea
            aria-label={`付せん${note.id}の内容`}
            value={note.text}
            onChange={(e) => update(note.id, { text: e.target.value })}
            onFocus={() => bringToFront(note.id)}
          />
        </div>
      ))}
    </div>
  );
}

.board {
  position: relative;
  height: 360px;
  background: #eefafd;
  border: 1px solid #9aa5ab;
  border-radius: 8px;
  overflow: hidden;
}

.note {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 120px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

.note-handle {
  height: 22px;
  flex: none;
  background: rgb(0 0 0 / 0.08);
  cursor: grab;
  /* タッチでドラッグしたときに、ページがスクロールしないようにする */
  touch-action: none;
}
.note-handle:active { cursor: grabbing; }
.note-handle:focus-visible { outline: 3px solid #00c8e8; }

.note textarea {
  flex: 1;
  border: 0;
  padding: 6px 8px;
  background: transparent;
  font: inherit;
  resize: none;
}

import { useState } from 'react';
import { NoteBoard } from './NoteBoard';
import type { Note } from './NoteBoard';

const STORAGE_KEY = 'notes';

const initialNotes: Note[] = [
  { id: 1, x: 20, y: 20, z: 1, text: '牛乳を買う', color: '#fff3a8' },
  { id: 2, x: 120, y: 70, z: 2, text: '記事の図を描く', color: '#c9f1fa' },
  { id: 3, x: 220, y: 120, z: 3, text: '本を返す', color: '#ffd6e0' },
];

// 保存してある位置があれば、それを使う
function load(): Note[] {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? (JSON.parse(saved) as Note[]) : initialNotes;
  } catch {
    return initialNotes;
  }
}

export function App() {
  const [notes, setNotes] = useState<Note[]>(load);

  function save(next: Note[]) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
    } catch {
      // 保存できなくても、画面の操作は続けられるようにする
    }
  }

  return (
    <main>
      <NoteBoard notes={notes} onChange={setNotes} onDrop={save} />
      <ul className="info">
        {notes.map((n) => (
          <li key={n.id}>付せん{n.id}：({n.x}, {n.y}) z {n.z}</li>
        ))}
      </ul>
    </main>
  );
}

付せん1を 20回の pointermove でドラッグ: 付せん1：(140, 210) z 7 / 付せん2：(0, 0) z 5 / 付せん3：(220, 120) z 6
localStorage.setItem の回数: ドラッグ中 0回、離したあと 1回
ページを読み込み直したあと: 付せん1：(140, 210) z 7 / 付せん2：(0, 0) z 5 / 付せん3：(220, 120) z 6

付せん1：(20, 20) z 1 / 付せん2：(120, 70) z 2 / 付せん3：(220, 120) z 3
付せん1のつまみの左端から30px・上端から10pxをつかみ、右へ200px・下へ130pxドラッグ: 付せん1：(220, 150) z 4 / 付せん2：(120, 70) z 2 / 付せん3：(220, 120) z 3
離したときのポインターと、付せん1のつまみの左上とのずれ: (30, 10)
ボードの (230, 160) でいちばん上の付せん: 1
付せん2を、ボードの右下の外までドラッグ: 付せん1：(220, 150) z 4 / 付せん2：(438, 240) z 5 / 付せん3：(220, 120) z 3
付せん2を、ボードの左上の外までドラッグ: 付せん1：(220, 150) z 4 / 付せん2：(0, 0) z 5 / 付せん3：(220, 120) z 3

付せん3の本文の上で、右へ110pxドラッグ: 付せん1：(220, 150) z 4 / 付せん2：(0, 0) z 5 / 付せん3：(220, 120) z 6 / 選ばれた文字: textarea の 0〜4 文字目
続けて入力: 付せん3の内容「本を返す（金曜まで）」

あり: 付せん1を右へ300px・下へ150pxドラッグして離す: 付せん1：(320, 170) z 4 / 押さずに、ポインターを元の位置へ戻す: 付せん1：(320, 170) z 4
  ドラッグ中にイベントが届いた要素: 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 付せん1のつまみ 離す:付せん1のつまみ
なし: 付せん1を右へ300px・下へ150pxドラッグして離す: 付せん1：(200, 110) z 4 / 押さずに、ポインターを元の位置へ戻す: 付せん1：(140, 80) z 4
  ドラッグ中にイベントが届いた要素: 付せん1の本文 付せん1の本文 付せん1の本文 付せん1の本文 付せん2の本文 付せん3のつまみ 付せん1の本文 付せん1の本文 付せん1の本文 付せん1の本文 離す:付せん1の本文

// 比べる用：z は変えず、配列の最後へ移して（DOM の最後に描いて）上に重ねる
  function bringToFront(id: number) {
    const list = latest.current;
    if (list[list.length - 1].id === id) return;
    const next = [...list.filter((n) => n.id !== id), list.find((n) => n.id === id)!];
    latest.current = next;
    onChange(next);
  }

z を変える版: 押した直後の hasPointerCapture: true
z を変える版: 付せん1を右へ300px・下へ150pxドラッグ: 付せん1：(320, 170) z 4 / gotpointercapture 1回 / 付せんの DOM の並び: 1,2,3
配列の最後へ移す版: 押した直後の hasPointerCapture: false
配列の最後へ移す版: 付せん1を右へ300px・下へ150pxドラッグ: 付せん1：(200, 110) z 1 / gotpointercapture 0回 / 付せんの DOM の並び: 2,3,1