ngx-draggable-resizer

A light-weight jquery-ui based directive in Angular for resizing and dragging elements.

DEMO: https://senalkumarage.github.io/ngx-draggable-resizer-demo/

Features

• Element resize
• Element drag
• OnPositionChange event listener
• OnSizeChange event listener

Dependencies

• Angular 7.x
• jquery 3.x
• jquery-ui 1.x

Install

npm install ngx-draggable-resizer --save

Setup

• Step 1: Importing the module

import { CommonModule } from '@angular/common';
 
import { NgxDraggableResizerModule } from 'ngx-draggable-resizer';
 
@NgModule({
  imports: [
    CommonModule,
    NgxDraggableResizerModule // NgxDraggableResizerModule added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}

• Step 2: Adding styles
  • If you are using sass you can import the css

  // regular style toast 
  @import '~ngx-draggable-resizer/css/ngx-draggable-resizer.css';

  • Or if you are using angular-cli you can add this to your angular.json

  "styles": [
      "styles.scss",
      "./node_modules/ngx-draggable-resizer/css/ngx-draggable-resizer.css"
  ]

• Step 3: Including jQuery
  • This step is not relevant if you have already setup jQuery in your project
  • In your angular.json file

  "scripts": [
      "./node_modules/jquery/dist/jquery.min.js"
  ]

Usage

<div draggableResizer style="background:red;width: 100px;height: 100px;"></div>

Options

Option	Type	Default	Description
draggableOnly	boolean	false	Whether the element can only be dragged
resizableOnly	boolean	false	Whether the element can only be resized

Events

Name	Description	Returns
sizeChanged	Triggers when the element gets resized	{width: number, height: number}
positionChange	Triggers when the element gets moved	{top: string, left: string}

License

MIT