ngx-sortable an angular 4 and above component for sorting list supporting drag and drop sort.
- Custom template
- Customizable
- Drag and drop sorting
- Use keyboard to sort
- Remove elements
npm install ngx-sortable
- import
NgxSortableModuleinto your app.module;
import { NgxSortableModule } from 'ngx-sortable'
- add
NgxSortableModuleto the imports of your NgModule:
@NgModule({
imports: [
...,
NgxSortableModule
],
...
})
class YourModule { ... }
- use
<ngx-sortable></ngx-sortable>in your templates to add sortable list in your view
<ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item>
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>
<ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item="item">
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>
Where content inside <ng-template> </ng-template> is the template that will be used for displaying list items. Also the class can be named accordingly this is just an example. Create a class and add it to your root style.css
Notice the difference in accessing the
itemin above two examples. Also fromv2.0.0onwards index of the item is also available in the template similar tolet-item="item"uselet-i="index"andiwill be the index variable available in the template.
items: any[]- array of list items.name: string- List name that will be shown in the header.listStyle: any- list styles such asheight, width.showHeader: boolean- flag to hide / show header default is trueremoveOnDropOutside: boolean- flag to enable remove items by dragging and dropping them outside the list. Default is falsearrowKeySort: boolean- flag to enable sort using keyboard arrow keys. Example: Ctrl + ArrowDown moves item downcommandKey: CommandKey- key type to use along with arrow keys for sorting e.g. ctrlKey/altKey. Default is ctrlKey
enum CommandKey {
CtrlKey = "ctrlKey",
ShiftKey = "shiftKey",
Altkey = "altKey",
MetaKey = "metaKey",
}
listStyle = {
width:'300px', //width of the list defaults to 300
height: '250px', //height of the list defaults to 250
}
listSorted($event): Event- when list is sorted emits listSorted event with updated order
Where
$eventis the sorted list
dragStart($event): Event- emitted when an item is seleceted and starts dragging
Where
$event:{ event: Javascript event, itemIndex: current item index, newIndex: -1, item: selected item}
dropped($event): Event- emitted when an item is dropped at the new index
Where
$event:{ event: Javascript event, itemIndex: current item index, newIndex: new item index, item: selected item}
moveDown($event): Event- emitted when an item is moved down in the list using the sort arrows
Where
$event:{ itemIndex: current item index, newIndex: new item index, item: selected item}
moveUp($event): Event- emitted when an item is moved up in the list using sort arrows
Where
$event:{ itemIndex: current item index, newIndex: new item index, item: selected item}
remove($event): Event- emitted when an item is removed from the list by dropping out, only works whenremoveOnDropOutsideis set to true
Where
$event:{ itemIndex: current item index, item: selected item}
Found a bug or an issue with this? Open a new issue here on GitHub.
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent