xieziyu
angular2-draggable
Table of contents
Getting Started
angular2-draggable has angular directives that make the DOM element draggable and resizable.
ngDraggable- v2.x requires Angular >= 6
- v1.4.2 requires Angular >= 4 && < 6
ngResizable- provided since v2.0, requires Angular >= 6
Latest Update
2018.11.29: 2.1.9
- ngDraggable: fix issue #31: Problems when scale transform applied to parent. (by rathodsanjay - PR #123)
2018.11.11: 2.1.8
2018.10.31: 2.1.7
- ngResizable: fix issue #116: ngResizable Locks Height When rzHandles Includes Only e, w. (Thanks to Yamazaki93)
2018.10.26: 2.1.6
- ngResizable: fix issue #115: rzResizing IE event issue
2018.10.15: 2.1.5
- ngDraggable: fix issue #114: EndOffset event not working properly with SnapToGrid
2018.08.03: 2.0.0
- Fix issue #84: iFrames, and context unrelated elements block all events, and are unusable
2018.07.02: 2.0.0-beta.2
2018.06.26: 2.0.0-beta.1
- ngResizable: Provide
(rzStart),(rzResizing),(rzStop)event emitters - ngResizable: Provide
resetSize(),getStatus()methods
- ngResizable: Provide
2018.06.25: 2.0.0-beta.0
- New:
ngResizabledirective which you can use to make the element resizable! More resizable options are planning. Refer to demo
- New:
Installation
npm install angular2-draggable --saveDraggable
Please refer to the demo page.
Firstly, import
AngularDraggableModulein your app module (or any other proper angular module):import { AngularDraggableModule } from 'angular2-draggable'; @NgModule({ imports: [ ..., AngularDraggableModule ], ... }) export class AppModule { }Then: use
ngDraggabledirective to make the DOM element draggable.Simple example:
- html:
<div ngDraggable>Drag me!</div>
- html:
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>
- html:
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:
ngDraggabledirective support following input porperties:| Input | Type | Default | Description | | ----- | ---- | ------- | ----------- | | ngDraggable | boolean |
true| You can toggle the draggable capability by settingtrueorfalse| | 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 |ngResizabledirective support following input porperties:| Input | Type | Default | Description | | ----- | ---- | ------- | ----------- | | ngResizable | boolean |
true| You can toggle the resizable capability by settingtrueorfalse| | 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. |
CSS:
When
ngDraggableis enabled on some element,ng-draggableclass is automatically assigned to it. You can use it to customize the pointer style. For example:.ng-draggable { cursor: move; }When
ngResizableis enabled on some element,ng-resizableclass is automatically assigned to it. And handle elements will be created withng-resizable-handle. You can customize the handle style.
Events
ngDraggabledirective:| Output | $event | Description | | ------ | ------ | ----------- | | started |
nativeElementof host | emitted when start dragging | | stopped |nativeElementof 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>ngResizabledirective:| 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; }; }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 demoThe demo page server is listening to: http://localhost:4203