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