ngx-draggabilly


Angular 2+ wrapper package around Draggabilly by Desandro. Make that shiz draggable.

Table of Contents

- Installation
- Usage
- Changelog
- Paperwork
- Contributing
- Issue / Feature Request
- Pull Request
- Credits
- License

Installation

``bash
npm install --save ngx-draggabilly
`

`bash
yarn add ngx-draggabilly
`

Usage

app.module.ts

`ts
import { NgModule } from '@angular/core';
import { NgxDraggabillyModule } from 'ngx-draggabilly';

import { AppComponent } from './app.component';

@NgModule({
declarations: [ AppComponent ],
imports: [ NgxDraggabillyModule ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`

app.component.html

`html



`

$3

You can pass options input to container element;

`html



`

or create object inside app.component.ts using interface NgxDraggabillyOptions and pass to element;

`ts
draggieOptions: NgxDraggabillyOptions = {
axis: 'y',
handle: '.handle'
};
`

`html



`

More information about options can be found here.

$3

Draggable element outputs some events;

For example: "Triggered when dragging starts and the element starts moving. Dragging starts after the user's pointer has moved a couple pixels to allow for clicks.";

`html



`

Full list of events can be found here.

$3

If you want to call some methods on draggabilly element, you can use service created speacially for this;

For example if you want to disable dragging you can call:

`ts
constructor(private draggieService: NgxDraggabillyService) {}

disableDrag() {
this.draggieService.disable();
}
``

Full list of methods can be found here.

Changelog

Please see Changelog Page for more information what has changed recently.

Paperwork

$3

Please see CONTRIBUTING.md for details.

$3

To submit an issue correctly, please follow instructions

If you have an idea, and you want to request feature, then read this one

$3

To crearte new pull request and add your piece of work in our project, go through this steps

Credits

- Zura Gabievi
- All contributors

License

The MIT License (MIT). Please see License file for more information.