Ngx-dragable-resizable NPM

NgxDragableResizable

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

📦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 :