نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

اختر مكتبة sortable هذه لـ Angular عندما تحتاج إلى ترتيب بالسحب والإفلات يعمل مع المصفوفات والنماذج التفاعلية وSignals ومنشئي الواجهات المعقّدة.

التثبيت

npm install ng-hub-ui-sortable

انتقل إلى

مثالي لـ

ترتيب المهام
محرّرات FormArray
منشئو التخطيط
إدارة الأولويات

حول sortable

يساعد ng-hub-ui-sortable فرق Angular على إعادة ترتيب البيانات بشكل طبيعي في المنتجات التي يهم فيها الترتيب: المهام والأولويات ومنشئو التخطيط أو كتل النماذج الديناميكية. ويُعدّ مفيدًا بصفة خاصة عندما تحتاج إلى سحب وإفلات دون فقدان التحكّم في تحديثات الحالة.

أدلّة الميزات

الاستخدام الأساسي

سيناريوهات استخدام أساسية للقوائم القابلة للفرز.

أمثلة:

مصفوفة بسيطة

إعادة ترتيب المصفوفات البسيطة.

Angular Drag and Drop with Simple Arrays

View code

Learn how to implement drag and drop functionality with simple arrays in Angular using SortableJS. The examples below show several Bootstrap elements that can be made sortable.

They share the same data model, so any drag/drop interaction updates all the blocks in real-time. In practice, any HTML element can be made sortable with Angular.

Sortable Button Groups Example

Cards

Ankara

Ankara description

Moscow

Moscow description

Munich

Munich description

Paris

Paris description

Washington

Washington description

Navigation

The actual model

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

Signals

اربط بيانات sortable بـ signals القابلة للكتابة في Angular.

Angular Signals Drag and Drop - Reactive Sortable Lists

View code

Implement reactive drag and drop with Angular Signals (Angular 18+). This example uses an Angular writable signal as the sortable model, demonstrating automatic reactivity. Drag to reorder and watch the signal-backed array update instantly.

Angularv18
Reactv19
Vuev3
Sveltev5

Current signal value:

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

التكامل مع النماذج

استخدم sortable مع النماذج التفاعلية في Angular.

أمثلة:

التكامل مع FormArray

أعد ترتيب عناصر FormArray باستخدام drag and drop.

Angular FormArray Drag and Drop with Reactive Forms

View code

Integrate drag and drop functionality with Angular Reactive Forms. Complex forms with FormArray controls are fully supported with automatic synchronization.

Try editing the text values and reordering the form inputs by dragging them.

The actual value of the array

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

الإعداد المتقدّم

خصّص سلوك SortableJS والتفاعلات معه.

أمثلة:

خيارات مخصّصة

هيّئ المقابض والمرشّحات والحركة والأحداث.

Advanced SortableJS Configuration Options for Angular

View code

Explore advanced customization options for Angular drag and drop. This example shows how to configure animation speed, handles, filters, and other SortableJS options to create the perfect user experience.

Disabled Sortable Elements Example

Element 1
Element 2
Element 3
Element 4
Element 5

and the actual model is

[
  "1",
  "2",
  "3",
  "4",
  "5"
]

Events

Binding to the events is easy. Any even could be attached as a property of Sortablejs. The example below binds to the onUpdate event. Drag the items and track the amount of updates.

Updated 0 times

Element 1
Element 2
Element 3
Element 4
Element 5

Hint: for the FormArray using onUpdate is kinda overhead because the FormArray.valueChanges provides an event on every change.

Autoscroll with fixed navbar

Normally the scrolling that is performed by Sortablejs is working fine. However with a fixed navbar it may cause problems.

Setting the scrollSensitivity to the proper value will solve the problem. Try it on the long list below

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

قوائم متعدّدة

اربط القوائم واستنسخ العناصر وتحكّم في قواعد النقل.

Angular Drag and Drop Between Multiple Connected Lists

View code

Learn how to implement drag and drop between multiple lists in Angular. This example demonstrates how sortable lists can be connected to each other, allowing seamless item transfer across different containers.

Note the sortable CSS class (provides min-height) so the lists never collapse when empty, maintaining a consistent drag-and-drop experience.

Transfer Items Between Lists Example

These lists are connected using the group option. You can drag and drop elements across different lists, making it perfect for kanban boards, task managers, and categorization interfaces.

Element 1
Element 2
Element 3
Element 4
Element 5

Element 6
Element 7
Element 8
Element 9
Element 10

and the actual state is

 [
  "1",
  "2",
  "3",
  "4",
  "5"
]

 [
  "6",
  "7",
  "8",
  "9",
  "10"
]

Clone items

The list 1 is a clone factory and list 2 can be its target.

Element 1
Element 2
Element 3
Element 4
Element 5

Element 6
Element 7
Element 8
Element 9
Element 10

and the actual state is

 [
  "1",
  "2",
  "3",
  "4",
  "5"
]

 [
  "6",
  "7",
  "8",
  "9",
  "10"
]

Super complicated example

These lists are connected together. You can drag / drop elements across the lists. Pay attention to the sortable CSS class (gives a min-height) that does not allow list to become invisible when all items are gone

1. This list cannot accept items

Element 1
Element 2
Element 3
Element 4
Element 5

2. This is a normal list

Element 6
Element 7
Element 8
Element 9
Element 10

3. This list clones its children

Element 11
Element 12

4. Only #1 can put here

Element 13

and the actual state is

 [
  "1",
  "2",
  "3",
  "4",
  "5"
]

 [
  "6",
  "7",
  "8",
  "9",
  "10"
]

 [
  "11",
  "12"
]

 [
  "13"
]

منشئ التخطيط

حاويات sortable متداخلة مع علامات تبويب وودجات.

Angular Layout Builder with Nested Drag and Drop Lists

View code

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`.

Manual Array Control Mode

View code

Manual Control Mode

This example demonstrates manual array control by setting [autoUpdateArray]="false". This gives you complete control over when and how arrays are updated, similar to Angular CDK's approach.

Benefits: Perform validation, make API calls, implement undo/redo, or use immutable patterns before updating your data.

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 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

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

التثبيت

انتقل إلى

مثالي لـ

حول sortable

أدلّة الميزات

الاستخدام الأساسي

أمثلة:

مصفوفة بسيطة

Angular Drag and Drop with Simple Arrays

Sortable Button Groups Example

Cards

Navigation

The actual model

Signals

Angular Signals Drag and Drop - Reactive Sortable Lists

التكامل مع النماذج

أمثلة:

التكامل مع FormArray

Angular FormArray Drag and Drop with Reactive Forms

الإعداد المتقدّم

أمثلة:

خيارات مخصّصة

Advanced SortableJS Configuration Options for Angular

Disabled Sortable Elements Example

Events

Autoscroll with fixed navbar

قوائم متعدّدة

Angular Drag and Drop Between Multiple Connected Lists

Transfer Items Between Lists Example

Clone items

Super complicated example

منشئ التخطيط

Angular Layout Builder with Nested Drag and Drop Lists

Demo: Generic, Tabs & Widgets

الوضع اليدوي

Manual Array Control Mode

Manual Control Mode

Single List - Manual Reordering

Current State:

Multiple Lists - Kanban Board Style

Operations Log

Code Example

Why Use Manual Control?

Validation

API Integration

Undo/Redo

Immutability

الميزات الرئيسية

ترتيب المصفوفات والقوائم

يعمل مع FormArray

تدفقات سحب وإفلات متصلة

التغييرات الأخيرة

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

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

المكتبات ذات الصلة

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

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