<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> [](#contributors-) <!-- ALL-CONTRIBUTORS-BADGE:END -->
npm install ng-sortgrid

![angular10]()
!Logo
- -
Table of Contents generated with DocToc
- Ng-sortgrid
- Getting started
- Download
- Apply the directive
- React on changes
- Group sortgrids
- Use the async pipe
- Style your items on different events
- Integrate the build in CSS
- Scrolling
- Custom scroll points
- Scroll speed (default 50)
- API
- Inputs
- Outputs
- Mobile usage
```
npm i ng-sortgrid
Import the `NgsgModule` in your `AppModule`.
``
import {NgsgModule} from 'ng-sortgrid'
...
@NgModule({
imports: [BrowserModule, NgsgModule],
//...
})
...
Apply the ngSortgridItem directive
Pass your items to the directive via the ngSortGridItems input.
!Grid demo
React on the 'sorted' output event. The sorted output event emits a NgsgOrderChange which contains the previousOrder and the currentOrder
```
"styles": [
"node_modules/ng-sortgrid/styles/ngsg.css",
],
Alternative you can provide custom styles for the different classes listed bellow
| Class | Description |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted |
| ng-sg-dropped | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed |
| ng-sg-selected | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag&drop |
| ng-sg-active | This class is added when dragging item| |
- If you drag an element in the top 50px of the screen
- If you drag an element in the bottom 50px of the screen
If you want to use those events on mobile you probably have to use some polyfills in order to emit all the needed events. Including this polyfill in your app should do the trick. https://github.com/timruffles/mobile-drag-drop.
Thanks goes to these wonderful people (emoji key):
Gonçalo 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!