API リファレンス

sortable の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

39 個のインプットで sortable を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`hubSortable`	`SortableData<T> \| SortableBindings`	—	ソート対象のコンテナーにバインドするデータ。配列、リアクティブフォームの `FormArray`、書き込み可能なシグナルのいずれかです。ドラッグ＆ドロップの操作と同期し続けます。省略可能で、`hubSortable` 属性だけでもディレクティブは動作し、その場合は何も変更せずに出力がすべての移動を報告します。
`options`	`Options`	—	SortableJS のオプションオブジェクト全体。各 SortableJS オプションは個別の input として直接バインドすることもできます（例: `handle`、`animation`、`group`）。
`autoUpdateArray`	`boolean`	`true`	`true`（既定）の場合、ディレクティブはドラッグごとにバインドされた配列を自動的に更新します。手動制御するには `false` に設定し、自分で配列を更新します。
`cloneFunction`	`(item: T) => T`	—	グループが `pull: 'clone'` モードのときに項目を複製するために使用する関数です。
`container`	`string`	—	ホストが実際のリストをラップしている場合に、ソート可能にすべきネストされた要素の CSS セレクターです。
`keyboardSorting`	`boolean`	`true`	キーボードによる並べ替え。既定で有効です。各項目がタブストップになり、`Enter` または `Space` でつかみ、矢印キーで動かし、`Home` と `End` で両端へ送り、`Escape` で元に戻します。アプリケーションが独自のキーボード操作を用意している場合は `false` にします。
`keyboardMessages`	`Partial<SortableKeyboardMessages>`	—	キーボード並べ替えがライブリージョンで読み上げる文言を差し替えます。指定しなかったものは既定の英語のままです。
`group`	`Options['group']`	—	複数のリストを接続し、どのリストが項目を渡せる・受け取れるかを制御するためのグループ名または設定オブジェクトです。
`sort`	`boolean`	—	リスト内での項目の並べ替えを有効または無効にします。
`delay`	`number`	—	ドラッグを開始できるようになるまでポインターを押し続けるミリ秒数。既定値は `0`。タッチ環境では値を上げて、短い押下ではドラッグではなくスクロールさせます。
`disabled`	`boolean`	—	ディレクティブを削除せずにソート動作を無効にします。
`draggable`	`string`	—	ドラッグ可能な子要素を限定する CSS セレクターです。
`handle`	`string`	—	各項目内でドラッグを開始する要素の CSS セレクター。残りの部分は操作可能なままです。
`animation`	`number`	—	並べ替えアニメーションの長さ（ミリ秒）です。
`ghostClass`	`string`	—	ドラッグ中に表示されるプレースホルダーに適用される CSS クラスです。
`chosenClass`	`string`	—	選択された瞬間からドラッグ終了までアイテムに付与される CSS クラス。既定値は `sortable-chosen`。
`dragClass`	`string`	—	ドラッグ中にポインターへ追従する要素に付与される CSS クラス。既定値は `sortable-drag`。
`fallbackOnBody`	`boolean`	—	ドラッグ中のプレビューをリストではなく `document.body` に追加し、`overflow: hidden` の祖先要素に切り取られないようにします。
`fallbackTolerance`	`number`	—	フォールバックのドラッグが始まるまでにポインターが移動すべきピクセル数。既定値は `0`。値を上げるとタップがドラッグとして扱われません。
`fallbackClass`	`string`	—	ネイティブの HTML5 ドラッグ＆ドロップを迂回するときに使われる複製プレビュー要素の CSS クラス。
`fallbackOffset`	`{ x: number; y: number }`	—	フォールバックのドラッグプレビューをポインターからずらすピクセル量。
`forceFallback`	`boolean`	—	ブラウザーネイティブの HTML5 ドラッグ＆ドロップを使わず、常にクローンをドラッグします。どのブラウザーでも見た目が揃います。
`filter`	`string \| ((event, target, sortable) => boolean)`	—	ドラッグできない要素を示す CSS セレクター（または述語）です。
`preventOnFilter`	`boolean`	—	`filter` を発火させたイベントで `preventDefault()` を呼びます。既定値は `true`。フィルターした要素が自身のクリックを必要とするコントロールなら無効にします。
`direction`	`'vertical' \| 'horizontal' \| ((event, target, dragEl) => 'vertical' \| 'horizontal')`	—	リストが並ぶ軸。未指定なら自動判定されます。判定を誤りやすいグリッドや折り返しのあるリストでは明示してください。
`swapThreshold`	`number`	—	入れ替えが起きるまでにポインターが対象アイテムを覆うべき割合（0〜1）。既定値は `1`。小さいほど早く入れ替わります。
`invertSwap`	`boolean`	—	常に反転した入れ替え領域を使い、ポインターがアイテムに入ったときではなく出たときに入れ替えます。
`invertedSwapThreshold`	`number`	—	入れ替え領域が反転している間に使われるしきい値。未指定なら `swapThreshold` の値が使われます。
`removeCloneOnHide`	`boolean`	—	クローンを隠すのではなく、隠れている間 DOM から取り除きます。既定値は `true`。
`ignore`	`string`	—	アイテム内でドラッグを開始してはならない要素の CSS セレクター。入力欄やリンクなどです。
`touchStartThreshold`	`number`	—	遅延ドラッグがキャンセルされるまでに指が動いてよいピクセル数。ドラッグとスクロールの境目です。
`emptyInsertThreshold`	`number`	—	空のリストに対して、ドラッグ中のアイテムが挿入される距離（ピクセル）。既定値は `5`。`0` ならポインターがリスト内にある必要があります。
`dropBubble`	`boolean`	—	drop イベントを祖先要素へ伝播させ続けます。
`dragoverBubble`	`boolean`	—	dragover イベントを祖先要素へ伝播させ続けます。
`dataIdAttr`	`string`	—	`Sortable.toArray()` と `store` が各アイテムの id として読む HTML 属性。既定値は `data-id`。
`delayOnTouchOnly`	`boolean`	—	`delay` をタッチ入力にだけ適用します。マウスでのドラッグはこれまでどおり即座に始まります。
`easing`	`string`	—	並べ替えアニメーションの CSS イージング関数。たとえば `cubic-bezier(1, 0, 0, 1)`。
`setData`	`(dataTransfer: DataTransfer, draggedElement: HTMLElement) => void`	—	ドラッグ開始時に呼ばれ、ネイティブの `DataTransfer` に書き込みます。ページ外へドラッグするためのフックです。
`store`	`{ get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void }`	—	並び順を保存し、次回の読み込み時に復元するための `get`/`set` コールバックの組。キーは `dataIdAttr` です。

アウトプット

sortable の動作に反応 — ロジックを接続できる 13 個のイベント。

名前	型	説明
`init`	`Sortable`	基盤となる SortableJS インスタンスが作成されたときに発行されます。
`start`	`SortableEvent`	ドラッグ操作の開始時に発行されます。
`end`	`SortableEvent`	結果に関わらず、ドラッグ操作の終了時に発行されます。
`add`	`SortableEvent`	別のリストからこのリストに項目がドロップされたときに発行されます。
`update`	`SortableEvent`	同じリスト内で項目の位置が変わったときに発行されます。
`sortEvent`	`SortableEvent`	リストの順序が変わるたびに発行されます（`add` または `update` の後）。
`remove`	`SortableEvent`	項目がこのリストから別のリストへ移動したときに発行されます。
`filterEvent`	`SortableEvent`	フィルターされた（ドラッグ不可の）項目をドラッグしようとしたときに発行されます。
`change`	`SortableEvent`	追加または削除によってリストが変化したときに発行されます。
`choose`	`SortableEvent`	項目が選択された（ポインターを押した）ときに発行されます。
`unchoose`	`SortableEvent`	ドラッグせずに項目が離されたときに発行されます。
`clone`	`SortableEvent`	クローンモードで項目が複製されたときに発行されます。
`move`	`SortableMoveEventPayload`	ドラッグ中に継続的に発行され、その戻り値で移動を許可するかどうかを制御できます。

テンプレート

テンプレートはまだドキュメント化されていません。