NgxDragableResizable

🎉 A useful library for drag and resize html elements in Angular Framework without Cdk Material

📦Demo

🚀demo

Install

• NPM: npm i ngx-dragable-resizable
• YARN: yarn add ngx-dragable-resizable

Usage

Import NgxDragableResizableModule to your working module

import { NgxDragableResizableModule } from  'ngx-dragable-resizable';

@NgModule({
  imports: [
    NgxDragableResizableModule 
  ]
})
export class AppModule { }

Use in your component

<div
    class="card"
    NgxDragableResizable >
   my element 
</div> 

Use in bounding element

<div  class="page">
    <div
        class="card"
        NgxDragableResizable
        [bounding]="'.page'">
        has bounding
    </div>
</div>

You can also disable dragging and resizing

<div
    NgxDragableResizable
    [drag]="false" 
    [resize]="false" 
    class="disable card">
    editable=false
</div>

@Inputs

| Name |Type|Default| Description | |--|--|--|--| |[bounding]|string|null| Selector that will be used to determine the element to which the draggable-resizable position will be constrained | |[dragRootElement]|string|null|Selector that will be used in handler or useful in drag and resize material dialog| |[minWidth]|number|20|Minimum width of element for resize (px)| |[minHeight]|number|20|Minimum height of element for resize (px)| |[drag]|boolean|true|If set false the user can only resize the element| |[resize]|boolean|true|If set false the user can only drag the element|

@Outputs \ Events

| Name |Type| Description | |--|--|--| |(onDrag)| EventEmitter<Position> | Emits when the user drag element| |(onDragEnd)| EventEmitter<Position> | Emits when the user mouseUp or touchEnd| |(onResize)| EventEmitter<Position> | Emits when the user resize element| |(onResizeEnd)| EventEmitter<Position> | Emits when the user mouseUp or touchEnd after resized element |

    export interface Position {
        tranlateY: number;
        translateX: number;
        top: number;
        left: number;
        width: number;
        height: number;
        point: {
          x: number,
          y: number
        };
    }

Release

• version 3.3.0 :

add [dragRootElement] for drag and resize material dialog

NOTE: if container is flexible and has alignItem or justifyContent changed to unset automatic

• version 3.2.0 :

Fix bug

• version 3.1.3 :

Fix bug drag end and resize end output

• version 3.1.2 :

Fix bug and drag with transform

• version 3.0.0 :

In addition to the corners with the edges can also be resized

• version 2.0.0 :

Use directive instead of component

• version 1.0.2 :

support touch screen

• version 0.1.0 :

add disable

Author

💻Mohammadreza samani | FrontEnd Developer

❤️Buy me a coffee 😉