angular2-draggable

angular2-draggable
- Table of contents
Getting Started
Installation
Draggable
Resizable
API
- Directive:
- CSS:
Events
Demo

Getting Started

angular2-draggable has angular directives that make the DOM element draggable and resizable.

ngDraggable
- v16.x requires Angular >= 16
- v2.x requires Angular >= 6
- v1.5.0 requires Angular >= 4 && < 6
ngResizable
- provided since v2.0, requires Angular >= 6

Installation

npm install angular2-draggable --save

Draggable

Please refer to the demo page.

Firstly, import AngularDraggableModule in your app module (or any other proper angular module):

import { AngularDraggableModule } from 'angular2-draggable';

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

Then: use ngDraggable directive to make the DOM element draggable.

Simple example:
- html:
```
<div ngDraggable>Drag me!</div>
```

Use [handle] to move parent element:

html:

<div ngDraggable [handle]="DemoHandle" class="card">
  <div #DemoHandle class="card-header">I'm handle. Drag me!</div>
  <div class="card-block">You can't drag this block now!</div>
</div>

Resizable

Please refer to the demo page.

Besides of importing AngularDraggableModule, you need to import resizable.min.css in your project. If you use angular-cli, you can add this in angular.json:

"styles": [
    ...
+   "node_modules/angular2-draggable/css/resizable.min.css"
]

Then you can use ngResizable directive to make the element resizable:

<div ngResizable> I'm now resizable </div>

<div [ngResizable]="false"> Resizable is disabled now </div>

<div ngResizable [rzHandles]="'n,e,s,w,se,sw,ne,nw'"> Each side is resizable </div>

Well you can use both directives concurrently if you wish:

<div ngDraggable ngResizable> I'm now draggable and resizable </div>

API

Directive:

ngDraggable directive support following input porperties:

Input	Type	Default	Description
ngDraggable	boolean	`true`	You can toggle the draggable capability by setting `true` or `false`
handle	HTMLElement	null	Use template variable to refer to the handle element. Then only the handle element is draggable
zIndex	string	null	Use it to set z-index property when element is not moving
zIndexMoving	string	null	Use it to set z-index property when element is moving
bounds	HTMLElemnt	null	Use it to set the boundary
inBounds	boolean	`false`	Use it make element stay in the bounds
outOfBounds	`{ top: boolean; bottom: boolean; right: boolean; left: boolean }`	`false`	Set it to allow element get out of bounds from the direction. Refer to demo
position	`{ x: number, y: number }`	`{ x:0, y:0 }`	Use it to set position offset
gridSize	number	1	Use it for snapping to grid. Refer to demo
preventDefaultEvent	boolean	`false`	Whether to prevent default mouse event
scale	number	1	Set it when parent element has CSS transform scale
lockAxis	`'x' \| 'y'`	null	Restrict dragging to a specific axis by locking another one

ngResizable directive support following input porperties:

Input	Type	Default	Description
ngResizable	boolean	`true`	You can toggle the resizable capability by setting `true` or `false`
rzHandles	string	`"e,s,se"`	Which handles can be used for resizing. Optional types in `"n,e,s,w,se,sw,ne,nw"` or `"all"`
rzAspectRatio	boolean \| number	`false`	`boolean`: Whether the element should be constrained to a specific aspect ratio. `number`: Force the element to maintain a specific aspect ratio during resizing (width/height)
rzContainment	Selector \| string \| Element	null	Constrains resizing to within the bounds of the specified element or region. It accepts an HTMLElement, `'parent'` or a valid CSS selector string such as '#id'
rzGrid	number \| number[]	1	Snaps the resizing element to a grid, every x and y pixels. Array values: `[x, y]`
rzMinWidth	number	1	The minimum width the resizable should be allowed to resize to.
rzMaxWidth	number	1	The maximum width the resizable should be allowed to resize to.
rzMinHeight	number	1	The minimum height the resizable should be allowed to resize to.
rzMaxHeight	number	1	The maximum height the resizable should be allowed to resize to.
preventDefaultEvent	boolean	`false`	Whether to prevent default mouse event.
rzScale	number	1	Set it when parent element has CSS transform scale

CSS:

When ngDraggable is enabled on some element, ng-draggable and ng-dragging class is automatically toggled on it. You can use it to customize the pointer style. For example:
```
.ng-draggable {
  cursor: grab;
}

.ng-dragging {
  cursor: grabbing;
}
```
When ngResizable is enabled on some element, ng-resizable class is automatically assigned to it. And handle elements will be created with ng-resizable-handle. You can customize the handle style.

Events

ngDraggable directive:

Output	$event	Description
started	`nativeElement` of host	emitted when start dragging
stopped	`nativeElement` of host	emitted when stop dragging
edge	{ top: boolean, right: boolean, bottom: boolean, left: boolean }	emitted after `[bounds]` is set
movingOffset	{ x: number, y: number }	emit position offset when moving
endOffset	{ x: number, y: number }	emit position offset when stop moving

Simple example:

<div ngDraggable
  (started)="onDragBegin($event)"
  (stopped)="onDragEnd($event)"
  (movingOffset)="onMoving($event)"
  (endOffset)="onMoveEnd($event)">
  Drag me!
</div>

ngResizable directive:

Output	$event	description
rzStart	`IResizeEvent`	emitted when start resizing
rzResizing	`IResizeEvent`	emitted when resizing
rzStop	`IResizeEvent`	emitted when stop resizing

export interface IResizeEvent {
  host: any;
  handle: any;
  size: {
    width: number;
    height: number;
  };
  position: {
    top: number;
    left: number;
  };
  direction: {
    n: boolean;
    s: boolean;
    w: boolean;
    e: boolean;
  };
}

Simple example:

<div ngResizable
  (rzStart)="onResizeStart($event)"
  (rzResizing)="onResizing($event)"
  (rzStop)="onResizeStop($event)">
  Resizable
</div>

Demo

You can clone this repo to your working copy and then launch the demo page in your local machine:

npm install
npm run demo

# or
yarn install
yarn demo

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