API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`hubSortable`必須	`T[] \| FormArray \| WritableSignal<T[]>`	—	ソート可能なコンテナにバインドされたデータ。通常の配列、リアクティブな `FormArray`、または書き込み可能なシグナルを指定でき、ドラッグ＆ドロップ操作と同期し続けます。
`options`	`Options`	—	SortableJS のオプションオブジェクト全体。各 SortableJS オプションは個別の input として直接バインドすることもできます（例: `handle`、`animation`、`group`）。
`autoUpdateArray`	`boolean`	`true`	`true`（既定）の場合、ディレクティブはドラッグごとにバインドされた配列を自動的に更新します。手動制御するには `false` に設定し、自分で配列を更新します。
`cloneFunction`	`(item: T) => T`	—	グループが `pull: 'clone'` モードのときに項目を複製するために使用する関数です。
`container`	`string`	—	ホストが実際のリストをラップしている場合に、ソート可能にすべきネストされた要素の CSS セレクターです。
`group`	`Options['group']`	—	複数のリストを接続し、どのリストが項目を渡せる・受け取れるかを制御するためのグループ名または設定オブジェクトです。
`sort`	`boolean`	—	リスト内での項目の並べ替えを有効または無効にします。
`handle`	`string`	—	各項目内でドラッグを開始する要素の CSS セレクター。残りの部分は操作可能なままです。
`draggable`	`string`	—	ドラッグ可能な子要素を限定する CSS セレクターです。
`filter`	`string \| ((event, target, sortable) => boolean)`	—	ドラッグできない要素を示す CSS セレクター（または述語）です。
`disabled`	`boolean`	—	ディレクティブを削除せずにソート動作を無効にします。
`animation`	`number`	—	並べ替えアニメーションの長さ（ミリ秒）です。
`ghostClass`	`string`	—	ドラッグ中に表示されるプレースホルダーに適用される CSS クラスです。

アウトプット

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`	ドラッグ中に継続的に発行され、その戻り値で移動を許可するかどうかを制御できます。

テンプレート

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

CSS 変数

CSS 変数はまだドキュメント化されていません。

スタイリングとテーマ設定

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。