Angular-Move-Element

An angular 4.0+ directive that allows an element to be moved

Demo

https://michaelkravchuk.github.io/angular-libs

Usage

Step 1: Install ng-move-element

npm install ng-move-element --save

Step 2: Import angular move element module into your app module

...
import { AngularMoveElementModule } from 'ng-move-element';

...

@NgModule({
    ...
    imports: [
        ...,
        AngularMoveElementModule
    ],
    ...
})
export class AppModule { }

Step 3: Add HTML code

<div class="container" #container [style.top.px]="data.top" [style.left.px]="data.left">
    <div (move)="onMove($event)"
         [targetElement]="container"
    ></div>
</div>

Or if you use angular component (and look at TS)

   [targetElement]="containerComponent"

Step 4: Add ts code

  public data: any = {};

  public onResize(evt: AngularMoveElementEvent): void {
        this.data.top = evt.currentTopValue;
        this.data.left = evt.currentLeftValue;
  }

and add ViewChild if you use angular component (don`t forget about breaking changes when you use *ngIf with ViewChild)

  @ViewChild('container',  {read: ElementRef})
  public readonly containerElement;

Interfaces

interface AngularMoveElementEvent {
    currentTopValue: number;
    currentLeftValue: number;
    originalTopValue: number;
    originalLeftValue: number;
    differenceTopValue: number;
    differenceLeftValue: number;
}

API

Attribute	Type	Description
moveStart	() => AngularMoveElementEvent	This event is fired when move is started (only one time)
move	() => AngularMoveElementEvent	This event is fired when mouse move and position is changed
moveEnd	() => AngularMoveElementEvent	This event is fired when move is finished (only one time)
targetElement	HTMLElement	Element that will be moved
applyClass	string	CSS class that will be assigned to the "targetElement" when the "moveStart "is called and will be removed when "moveEnd"is called

License

MIT