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