@epicq/move-it

move-it

Drag & Drop & Resize enabled with Angular directives. Chrome and Firefox compatible.

Demo

Table of contents

1. Installation
2. Draggable
3. Resizable
4. Events
5. Local Development

Installation

1. npm install @epicq/move-it

2. Import MoveItModule in your app module (or any other angular module):

import { MoveItModule } from '@epicq/move-it';

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

3. Import move-it.css in your project. If you use angular-cli, you can add this in angular.json:

"styles": [
    ...
+   "node_modules/@epicq/move-it/lib/move-it.css"
]

Draggable

Use ngMoveit directive to make the DOM element draggable.

• Simple example:

  <div ngMoveit>Move me everywhere</div>

• Use [bounds] to limit the draggable element into a container:

<div class="container" #bounds>
  <div ngMoveit [bounds]="bounds">
    <div>Can't get out of my box</div>
  </div>
</div>

• Use [draggableFrom] to move element from a specific handle:

  <div ngMoveit [draggableFrom]="handle">
    <div class="handle">Handle</div>
    <div>Can be drag only from my handle</div>
  </div>

Resizable

Use ngSizeit directive to make the DOM element resizable.

• Simple example:

  <div ngSizeit>Resize me</div>

• Use [bounds] to limit the element into a container:

<div class="container" #bounds>
  <div ngSizeit [bounds]="bounds">
    <div>Can't be bigger than my box</div>
  </div>
</div>

Events

• ngMoveit directive:

  Output	$event	Description
  mDragStart	{ item: HTMLElement, initLeft: number, initTop: number, offsetLeft: number, offsetTop: number }	Emitted when start dragging
  mDragMove	{ item: HTMLElement, initLeft: number, initTop: number, offsetLeft: number, offsetTop: number }	Emitted when dragging
  mDragStop	{ item: HTMLElement, initLeft: number, initTop: number, offsetLeft: number, offsetTop: number }	Emitted when stop dragging

  Simple example:

  <div ngMoveit
    (mDragStart)="onStart($event)"
    (mDragMove)="onMove($event)"
    (mDragStop)="onStop($event)">
    Move me
  </div>

• ngSizeit directive:

  Output	$event	Description
  mResizeStart	{ item: HTMLElement, width: number, height: number }	Emitted when start resizing
  mResizeMove	{ item: HTMLElement, width: number, height: number }	Emitted when resizing
  mResizeStop	{ item: HTMLElement, width: number, height: number }	Emitted when stop resizing

  Simple example:

  <div ngSizeit
    (mResizeStart)="onStart($event)"
    (mResizeMove)="onMove($event)"
    (mResizeStop)="onStop($event)">
    Resize me
  </div>

Local development

You can clone this repo and launch the demo page on your local machine:

npm install
npm run build:lib
npm run start

The demo page server is listening to: http://localhost:4201