angular2-draggable
Table of contents
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
CHANGELOG
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:
<div ngDraggable>Drag me!</div>
-
Use [handle]
to move parent element:
<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:
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
yarn install
yarn demo
The demo page server is listening to: http://localhost:4203