並び替え可能な要素（Sortable）の中に、さらに並び替え可能な要素（Sortable）を配置したい 例えば、Torello のような、カードリスト内も並び替えできるし、リスト自体も並び替えられるようなケース 実装した時に、つまづいたことなどを整理する 基本構成 S…

dnd-kit を使ってドラッグ＆ドロップを実装した際、ドラッグ中にマウスのホイールスクロールできなくなった DragOverlay を使ってプレビュー表示していることが原因と分かったので、解決方法を整理しておく 現象 ドラッグ中、スクロール可能なコンテナやペー…

ドラッグ＆ドロップ操作中に画面端へ移動した際、dnd-kit ではスクロール制御のための仕組みとして autoScroll が用意されている ただ、このデフォルトの設定ではスクロール速度の調整ができないのでカスタマイズしたく調べた DndContext | @dnd-kit – Docum…

dnd-kitでドラッグ＆ドロップでリストにアイテムを並び替えるだけでなく、リストの末尾にドラッグしたら新しくアイテムを追加したい 基本方針 リストの末尾に useDroppable な要素を置いてドロップ可能にする ドロップ判定時に「sortableリスト上なのか、dro…

dnd-kit では、ドラッグ中にどの要素を「ドロップ対象」とするかを判定する仕組みとして collisionDetection が用意されている docs.dndkit.com デフォルトの戦略だけでは操作感に課題が出ることも多いため、状況に応じてカスタマイズすることで最適な動作が…

dnd-kit の DragOverlay を使って、ドラッグ中のプレビュー表示をカスタマイズしたのだが、ドロップ直後に DragOverlay が一瞬消えて再描画されるので「チラつき」が気になった 原因はドラッグ終了時（onDragEnd）に activeId を即座に null にしていること…

dnd-kit を使ってドラッグ＆ドロップを実装する際、フォーム要素（input や button など）を含む場合に注意が必要だった ドラッグ操作とクリック・入力操作が競合しないように制御する方法を調べたのでメモ 発生した問題 input や select をクリックすると、…

dnd-kit を使って複数のリスト間でドラッグ＆ドロップを実現する場合のメモ 複数リストで考慮すべきポイント 各リストごとに SortableContext を用意する アイテムの id がリスト間で重複しないように設計する onDragEnd で「どのリストからどのリストへ移動…

dnd-kit を使って並び替え機能を実装する際、SortableContext を使う このコンテキストが items と strategy というプロパティを持つが、それぞれがどのように動作に影響するのかを調べた docs.dndkit.com items の役割 items は、並び替え対象となる要素のI…

以前、dnd-kit というライブラリを調べたことがあった uga-box.hatenablog.com 今回は実際に使ってみて useSortable と useDroppable についてわかったことをまとめる useDroppable の概要 useDroppable は、ドラッグ対象を受け入れる領域（ドロップゾーン）…