Home Angular Angular Directive That Makes The DOM Element Draggable And Resizable

Angular Directive That Makes The DOM Element Draggable And Resizable

Angular webcodeflow · August 21, 2022 · 0 Comment

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

angular resizable and draggable modal component, angular draggable droppable, angular drag and drop between components, angular draggable resizable

How to make use of it:

Installation:

npm install angular2-draggable --save

1. First, import the AngularDraggableModule into your app module (or any other suitable angle module):

import { AngularDraggableModule } from 'angular2-draggable';

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

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

<div ngDraggable>Drag me!</div>

3. Use [handle] to move the 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>

angular 2 draggable component, angular2-draggable Plugin/Github, angular2 draggable bounds example