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

npm install --save ngx-draggabilly

yarn add ngx-draggabilly

Usage

app.module.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

<div draggabilly>DRAG ME!</div>

Options

You can pass options input to container element;

<div draggabilly [options]="{ axis: 'x' }">DRAG ME!</div>

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

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

<div draggabilly [options]="draggieOptions">
  <div class="handle">HOLD HERE</div>
  & DRAG ME...
</div>

More information about options can be found here.

Events

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.";

<div draggabilly (dragStart)="handleDragStart($event)">DRAG ME!</div>

Full list of events can be found here.

Methods

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:

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

Contributing

Please see CONTRIBUTING.md for details.

Issue / Feature Request

To submit an issue correctly, please follow instructions

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

Pull Request

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.