Angular ソート可能リストとドラッグ＆ドロップ | ng-hub-ui-sortable

配列、FormArray 連携、Signals ワークフロー、接続されたリストに対応する Angular のソート可能リストとドラッグ＆ドロップユーティリティ。

最終更新 2026/08/08

概要

チームがこのライブラリを探す理由

配列、リアクティブフォーム、Signals、複雑な UI ビルダーで機能するドラッグ＆ドロップの並べ替えが必要なとき、この Angular ソート可能ライブラリを選んでください。

インストール

npm install ng-hub-ui-sortable

ジャンプ

最適な用途

  • タスクの並べ替え
  • FormArray エディター
  • レイアウトビルダー
  • 優先度の管理

について sortable

ng-hub-ui-sortable は、順序が重要なプロダクト（タスク、優先度、レイアウトビルダー、動的なフォームブロック）で、Angular チームがデータを自然に並べ替えられるよう支援します。状態更新の制御を失うことなくドラッグ＆ドロップが必要なときに特に役立ちます。

機能ガイド

基本的な利用

sortable リストの基本的な利用シナリオです。

サンプル:
シンプルな配列

シンプルな配列を並べ替えます。

Sortable - Simple Arrays

Make any array sortable with a single directive. Every layout below shares the same model, so each drag updates them all.

Button groups
Cards
Ankara
Ankara description
Moscow
Moscow description
Munich
Munich description
Paris
Paris description
Washington
Washington description
Navigation
Current model
[ "Ankara", "Moscow", "Munich", "Paris", "Washington" ]

コード

Signals

sortable データを Angular の書き込み可能な signal にバインドします。

Sortable - Signals

Bind a writable signal as the sortable model. Reordering updates the signal value instantly, keeping reactive state in sync.

  • Angularv18
  • Reactv19
  • Vuev3
  • Sveltev5

Current signal value:

[ "Angular", "React", "Vue", "Svelte" ]

コード

フォームとの統合

Angular のリアクティブフォームで sortable を使用します。

サンプル:
FormArray との統合

drag and drop で FormArray コントロールを並べ替えます。

Sortable - Reactive FormArray

Bind directly to a reactive FormArray. Edit the inputs and drag to reorder — the form value always reflects the current order.

Current FormArray value:

[ "Ankara", "Moscow", "Munich", "Paris", "Washington" ]

コード

高度な設定

SortableJS の動作と操作をカスタマイズします。

サンプル:
カスタムオプション

ハンドル、フィルター、アニメーション、イベントを設定します。

Sortable - Options

Pass any SortableJS options through the directive: filter non-draggable items, hook into events and tune autoscroll.

Filtered (disabled) items
  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
[ "1", "2", "3", "4", "5" ]
Events
Updated 0 times
  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
Autoscroll

Drag near the edges of the list to trigger autoscroll.

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7
  • Element 8
  • Element 9
  • Element 10
  • Element 11
  • Element 12
  • Element 13
  • Element 14
  • Element 15
  • Element 16
  • Element 17
  • Element 18
  • Element 19
  • Element 20
  • Element 21
  • Element 22
  • Element 23
  • Element 24
  • Element 25
  • Element 26
  • Element 27
  • Element 28
  • Element 29
  • Element 30

コード

複数のリスト

リストを接続し、アイテムを複製し、転送ルールを制御します。

Sortable - Multiple Lists

Connect lists with the group option to transfer items across containers. Build kanban boards, clone factories and constrained drop targets.

Transfer between lists
  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
[ "1", "2", "3", "4", "5" ]
  • Element 6
  • Element 7
  • Element 8
  • Element 9
  • Element 10
[ "6", "7", "8", "9", "10" ]
Clone items

List 1 is a clone factory; list 2 is its target.

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7
  • Element 8
  • Element 9
  • Element 10
Constrained groups
1. Cannot accept items
  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
2. Normal list
  • Element 6
  • Element 7
  • Element 8
  • Element 9
  • Element 10
3. Clones children
  • Element 11
  • Element 12
4. Only #1 can drop here
  • Element 13

コード

レイアウトビルダー

タブとウィジェットを備えたネストされた sortable コンテナです。

Sortable - Layout Builder

Build hierarchical, nested drag-and-drop layouts with grouped containers for generics, tabs and widgets.

Build advanced visual layout builders with nested drag and drop in Angular. This powerful example demonstrates nested sortable lists with drag handles and component slots, perfect for creating page builders and dashboard designers.

Create hierarchical structures with drag-and-drop functionality—ideal for layout builders, dashboard organizers, and visual editors. Supports multi-level nesting with full control over handles and constraints.

Demo: Generic, Tabs & Widgets

Generic A
Widget 1
Widget 2
Tabs Container
Tab 1
Tab 2
Generic B
Widget 3
Generic C
Generic D
Widget 4
Generic E
Move log

No events yet.

コード

手動モード

`autoUpdateArray=false` で自動更新を無効にし、`moveItemInArray`、`transferArrayItem`、`copyArrayItem` ヘルパーを使って自分で変更を適用します。

Sortable - Manual Mode

Disable automatic array updates and apply each reorder yourself with the moveItemInArray and transferArrayItem helpers.

Single List - Manual Reordering

Drag and drop tasks to reorder them. Notice how we manually update the array using the moveItemInArray helper function.

Task List
  • Design UI mockups
  • Implement authentication
  • Write unit tests
  • Deploy to production
Current State:
[
  {
    "id": 1,
    "title": "Design UI mockups",
    "completed": false
  },
  {
    "id": 2,
    "title": "Implement authentication",
    "completed": false
  },
  {
    "id": 3,
    "title": "Write unit tests",
    "completed": false
  },
  {
    "id": 4,
    "title": "Deploy to production",
    "completed": false
  }
]

Multiple Lists - Kanban Board Style

Drag tasks between different status columns. The transferArrayItem helper makes it easy to move items between arrays while maintaining full control.

To Do 3
  • Review pull requests
    Priority: high
  • Update documentation
    Priority: medium
  • Refactor legacy code
    Priority: low
In Progress 2
  • Fix bug #123
    Priority: high
  • Add new feature
    Priority: medium
Done 1
  • Initial setup
    Priority: high

Operations Log

No operations yet. Start dragging items to see the log!

Code Example

Component Handler
import { moveItemInArray, transferArrayItem } from 'ng-hub-ui-sortable';

onTasksUpdate(event: SortableEvent): void {
  // Manually update the array with full control
  moveItemInArray(this.tasks, event.oldIndex, event.newIndex);
  
  // You can add validation, API calls, etc. here
  console.log('Task reordered!');
}

onListAdd(event: SortableEvent, targetList: any[], listName: string): void {
  const sourceList = this.getListByElement(event.from);
  
  // Transfer item between arrays
  transferArrayItem(sourceList, targetList, event.oldIndex, event.newIndex);
  
  // Perfect place for API calls to persist the change
  this.apiService.updateTaskStatus(item.id, listName);
}

Why Use Manual Control?

Validation

Validate changes before updating your data model. Prevent invalid operations or apply business rules.

API Integration

Make API calls to persist changes immediately. Handle success/error responses appropriately.

Undo/Redo

Implement undo/redo functionality by maintaining operation history before committing changes.

Immutability

Use immutable data patterns with OnPush change detection for optimal performance.

コード

主な機能

最近の変更

Version 22.1.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.1.1 - 7/28/26, 12:00 AM

added: Documented the pointer-only accessibility limitation of SortableJS drag-and-drop and the recommended keyboard alternative (move up/down controls on the same array).

Version 22.1.0 - 6/29/26, 12:00 AM

added: `provideSortable()` standalone provider function to register global SortableJS options without `SortableModule`.

added: Public type exports for the directive payloads (`SortableData`, `SortableEventName`, `SortableMoveEventPayload`).

deprecated: `SortableModule` and `SortableModule.forRoot()` — import the standalone `SortableDirective` and use `provideSortable()` instead.

changed: Aligned package scaffolding and documentation with the rest of the ng-hub-ui ecosystem.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Rebranded the package and standardized its metadata and README to match the ng-hub-ui family.

Version 21.2.0 - 2/10/26, 12:00 AM

added: Manual control mode via the `autoUpdateArray` input (default `true`); set it to `false` to emit events without mutating the bound array.

added: Array helper functions `moveItemInArray`, `transferArrayItem` and `copyArrayItem` for manual array manipulation.

added: Re-exported SortableJS types (`SortableEvent`, `Options`, `MoveEvent`, `GroupOptions`, `Sortable`) from the library root.

changed: Moved `sortablejs` from peer dependencies to dependencies so it installs automatically.

fixed: Prevented duplicate `update`/`add` events from firing for a single drag operation in manual control mode.

Version 21.0.1 - 12/10/25, 12:00 AM

added: Initial ng-hub-ui release: directive-based SortableJS bindings for arrays, FormArray and Signals.

関連ライブラリ

ng-hub-ui-paginable ng-hub-ui-board ng-hub-ui-history