dnd-kit
DndContext
これで囲む
アクションのハンドリングとかここでできる
コールバックに Draggable で指定したidやデータを参照できるようになる
onDragEnd?(event: DragEndEvent): void; をよく使う
別にドラッグしたアイテムの移動とかをしてくれるわけではなくて、ドラッグした情報を渡してくれる
その後どうするかはコンシューマ次第
Droppable
Draggableなオブジェクトを入れておけるコンポーネント
Draggable
ドラッグできるもの。Droppableの中に入る
useDraggable({ id: "foobar" }) するとrefとかlistenerが帰ってくるので、よしなにセットする→DndContextでイベントが拾える
listener
listenerを特定のDOMに指定することで、例えば移動用のハンドルみたいなものが作れる
attributes
色々アクセシビリティの文脈で必要な情報を渡している
なんでもとりあえずつけておけというよりは、考えて付与するといいですよ、と書いてある
ariaのattributeの一つで、どういう意味合いのDOMなのか
<button>エレメントを使うのがおすすめだが、そうでない場合はこのroleを渡すのがおすすめ
tabIndex
キーボードのフォーカスが当たるようにするためにはこのtabIndexが必要
他にも、aria-roledescriptionやaria-describedbyなど
touch-action: none; しておくこと
DragOverlay
ドラッグ中に物体を移動させてるみたいに見せるOverlay
Sensor
イベントをDndContextに伝える
Pointer
touch-action: none; をしないと、モバイルデバイスでスクロールしてしまうのでドラッグできる要素には指定しておくこと
Modifiers
Sensorのフィルターと考えるといいかな？次のようなことができる
横軸だけしか動かないようにする
あるコンテナより外にドラッグできないようにする
ある数値でクランプする(例えば30pxおきにするとか)
-.icon
Sortable
アーキテクチャ
@dnd-kit/core の上にできている
SortableContext: useSortable hookでconsumeしているContextの情報を提供する
<SortableContext item={IDのsorted list}>
ここで渡しているIDは、useSortableのIDである必要がある
useSortable: useDroppableとuseDraggablehooksを合わせたもの
attributesとかlisteners とかsetNodeRefとか useDraggableでもらえる色々な値がここでももらえる
https://gyazo.com/c5db7470aa348334db4b751c7a8809ad