Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manishjanky/ngx-sortable
ngx-sortable is an angular sortable list components that support drag and drop sorting
https://github.com/manishjanky/ngx-sortable
angualar4 angular angular-components component drag-and-drop library ngx-sortable sortable sortable-lists sorting
Last synced: 29 days ago
JSON representation
ngx-sortable is an angular sortable list components that support drag and drop sorting
- Host: GitHub
- URL: https://github.com/manishjanky/ngx-sortable
- Owner: manishjanky
- License: mit
- Created: 2018-04-06T09:56:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T15:56:36.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T17:09:20.210Z (about 1 month ago)
- Topics: angualar4, angular, angular-components, component, drag-and-drop, library, ngx-sortable, sortable, sortable-lists, sorting
- Language: TypeScript
- Homepage:
- Size: 4.61 MB
- Stars: 21
- Watchers: 4
- Forks: 15
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-sortable
[](https://github.com/me-and/mdf/blob/master/LICENSE)
[]()
[]()
[]()
[]()
[]()
[]()
[]()
[]()
`ngx-sortable` an angular 4 and above component for sorting list supporting drag and drop sort.
## Features
* Custom template
* Customizable
* Drag and drop sorting
* Use keyboard to sort
* Remove elements
## Examples
* [demo-page](https://manishjanky.github.io/ngx-sortable/)
## Installation
* `npm install ngx-sortable`
### Using with webpack and tsc builds/ angular-cli builds
* import `NgxSortableModule` into your app.module;
````
import { NgxSortableModule } from 'ngx-sortable'
````
* add `NgxSortableModule` to the imports of your NgModule:
`````
@NgModule({
imports: [
...,
NgxSortableModule
],
...
})
class YourModule { ... }
`````
* use `` in your templates to add sortable list in your view
## Deprecated
````
{{item}}
````
## `v2.0.0` onwards use below
````
{{item}}
````
Where content inside `` `` 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 `item` in above two examples. Also from `v2.0.0` onwards index of the item is also available in the template similar to `let-item="item"` use `let-i="index"` and `i` will be the index variable available in the template.
## Config
### Input
* `items: any[]` - array of list items.
* `name: string` - List name that will be shown in the header.
* `listStyle: any` - list styles such as `height, width`.
* `showHeader: boolean` - flag to hide / show header default is true
* `removeOnDropOutside: boolean` - flag to enable remove items by dragging and dropping them outside the list. Default is false
* `arrowKeySort: boolean` - flag to enable sort using keyboard arrow keys. Example: Ctrl + ArrowDown moves item down
* `commandKey: 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
}
````
### Output
* `listSorted($event): Event` - when list is sorted emits listSorted event with updated order
> Where `$event` is 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 when `removeOnDropOutside` is set to true
> Where ``$event:{
itemIndex: current item index,
item: selected item}
``
## Help Improve
Found a bug or an issue with this? [Open a new issue](https://github.com/manishjanky/ngx-sortable/issues) here on GitHub.
## Contributing to this project
Anyone and everyone is welcome to contribute. Please take a moment to
review the [guidelines for contributing](CONTRIBUTING.md).
* [Bug reports](CONTRIBUTING.md#bugs)
* [Feature requests](CONTRIBUTING.md#features)
* [Pull requests](CONTRIBUTING.md#pull-requests)