React drag and drop without the complexity

1import { useLocale } from "../../lib/locale";
2import { useRef, useState } from "react";
3import type { PointerEvent } from "react";
4import { ArrowRight, RotateCcw } from "lucide-react";
5import { dragProgress, dropColumn } from "../../lib/drag";
6
7export default function MovementDemo() {
8  const { t } = useLocale();
9  const [done, setDone] = useState(false);
10  const [animated, setAnimated] = useState(true);
11  const [keyboard, setKeyboard] = useState(false);
12  const [progress, setProgress] = useState<number | null>(null);
13  const gesture = useRef<{
14    id: number;
15    x: number;
16    start: number;
17    distance: number;
18    progress: number;
19  } | null>(null);
20
21  function startDrag(event: PointerEvent<HTMLDivElement>) {
22    if (!event.isPrimary || event.button !== 0 || gesture.current) return;
23    const card = event.currentTarget;
24    const track = card.parentElement;
25    if (!track) return;
26    // Pick up the card where it is, even during an interrupted transition.
27    const distance = card.offsetWidth;
28    const offset =
29      card.getBoundingClientRect().left -
30      track.getBoundingClientRect().left -
31      card.offsetLeft;
32    const start = Math.max(0, Math.min(1, offset / distance));
33    gesture.current = {
34      id: event.pointerId,
35      x: event.clientX,
36      start,
37      distance,
38      progress: start,
39    };
40    card.setPointerCapture(event.pointerId);
41    setKeyboard(false);
42    setProgress(start);
43  }
44
45  function moveDrag(event: PointerEvent<HTMLDivElement>) {
46    const current = gesture.current;
47    if (!current || current.id !== event.pointerId) return;
48    current.progress = dragProgress(
49      current.start,
50      event.clientX - current.x,
51      current.distance,
52    );
53    setProgress(current.progress);
54  }
55
56  function finishDrag(event: PointerEvent<HTMLDivElement>, cancelled = false) {
57    const current = gesture.current;
58    if (!current || current.id !== event.pointerId) return;
59    gesture.current = null;
60    if (!cancelled) {
61      const end = dragProgress(
62        current.start,
63        event.clientX - current.x,
64        current.distance,
65      );
66      setDone(dropColumn(end) === 1);
67    }
68    setProgress(null);
69    if (event.currentTarget.hasPointerCapture(event.pointerId))
70      event.currentTarget.releasePointerCapture(event.pointerId);
71  }
72  return (
73    <figure className="article-demo">
74      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-line px-4 py-3 text-xs">
75        <span className="text-muted">
76          {t("Une carte qui change de colonne")}
77        </span>
78        <label className="flex cursor-pointer items-center gap-2 text-ink">
79          <input
80            type="checkbox"
81            checked={animated}
82            onChange={(event) => setAnimated(event.target.checked)}
83            className="size-3.5 accent-ink"
84          />
85          {t("Avec mouvement")}
86        </label>
87      </div>
88      <div className="p-4 sm:p-6">
89        <div className="grid grid-cols-2 gap-3 text-[11px] text-muted">
90          <span>{t("À faire")}</span>
91          <span>{t("Terminé")}</span>
92        </div>
93        <div className="relative mt-3 h-28 rounded-lg bg-line/50 p-2">
94          <div
95            aria-hidden="true"
96            className="absolute inset-y-0 left-1/2 border-l border-dashed border-muted/25"
97          />
98          <div
99            className="demo-moving-card grid h-24 w-1/2 touch-pan-y select-none content-center gap-2 rounded-md border border-line bg-page px-3 shadow-sm"
100            role="slider"
101            tabIndex={0}
102            aria-label={t("Déplacer la tâche")}
103            aria-valuemin={0}
104            aria-valuemax={1}
105            aria-valuenow={done ? 1 : 0}
106            aria-valuetext={done ? t("Terminé") : t("À faire")}
107            aria-describedby="drag-instructions"
108            onPointerDown={startDrag}
109            onPointerMove={moveDrag}
110            onPointerUp={(event) => finishDrag(event)}
111            onPointerCancel={(event) => finishDrag(event, true)}
112            onLostPointerCapture={(event) => finishDrag(event, true)}
113            onKeyDown={(event) => {
114              if (event.key === "Escape") {
115                const current = gesture.current;
116                gesture.current = null;
117                setProgress(null);
118                if (
119                  current &&
120                  event.currentTarget.hasPointerCapture(current.id)
121                )
122                  event.currentTarget.releasePointerCapture(current.id);
123                return;
124              }
125              if (
126                ![
127                  "ArrowLeft",
128                  "ArrowRight",
129                  "Home",
130                  "End",
131                  " ",
132                  "Enter",
133                ].includes(event.key)
134              )
135                return;
136              event.preventDefault();
137              if (event.repeat) return;
138              gesture.current = null;
139              setProgress(null);
140              setKeyboard(true);
141              setDone(
142                event.key === "ArrowLeft" || event.key === "Home"
143                  ? false
144                  : event.key === "ArrowRight" || event.key === "End"
145                    ? true
146                    : !done,
147              );
148            }}
149            style={{
150              cursor: progress === null ? "grab" : "grabbing",
151              transform: `translateX(${(progress ?? (done ? 1 : 0)) * 100}%)`,
152              transition:
153                animated && !keyboard && progress === null
154                  ? "transform 220ms cubic-bezier(0.22, 1, 0.36, 1)"
155                  : "none",
156            }}
157          >
158            <span className="text-[10px] text-muted">Portfolio</span>
159            <span className="text-xs font-medium leading-relaxed text-ink">
160              {t("Vérifier la version mobile")}
161            </span>
162          </div>
163        </div>
164        <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
165          <p role="status" className="text-xs text-muted">
166            {done ? t("La tâche est terminée.") : t("La tâche est à faire.")}
167          </p>
168          <button
169            type="button"
170            onKeyDown={(event) => {
171              if (event.key !== "Enter" && event.key !== " ") return;
172              event.preventDefault();
173              if (event.repeat) return;
174              setKeyboard(true);
175              setDone((value) => !value);
176            }}
177            onClick={(event) => {
178              setKeyboard(event.detail === 0);
179              setDone((value) => !value);
180            }}
181            disabled={progress !== null}
182            className="inline-flex min-h-10 items-center gap-2 rounded-md border border-line bg-page px-3 text-xs text-ink hover:bg-surface active:scale-[0.98] disabled:opacity-50"
183          >
184            {done ? t("Remettre à faire") : t("Terminer la tâche")}
185            {done ? (
186              <RotateCcw className="size-3.5" aria-hidden="true" />
187            ) : (
188              <ArrowRight className="size-3.5" aria-hidden="true" />
189            )}
190          </button>
191        </div>
192      </div>
193      <figcaption
194        id="drag-instructions"
195        className="border-t border-line px-4 py-3 text-[11px] leading-relaxed text-muted"
196      >
197        {t(
198          "Glisse la carte à la souris ou au doigt. Au clavier, utilise les flèches gauche et droite. Rien n’est enregistré. Le déplacement suit ton geste, même si les transitions sont désactivées.",
199        )}
200      </figcaption>
201    </figure>
202  );
203}