The Angular library provides opportunity to use drag and resize functionality on HTML element.
NPM: npm install ngx-drag-resize --save
Yarn: yarn add ngx-drag-resize
Ensure your component imports all required directives.
Example :import {
NgxDragDirective,
NgxDragHandleDirective,
NgxResizeDirective,
NgxResizeHandleDirective
} from 'ngx-drag-resize';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [NgxResizeDirective, NgxResizeHandleDirective, NgxDragDirective, NgxDragHandleDirective]
})
export class AppComponent {}Use directives within your template.
Simple drag.
Example :<div ngxDrag>drag me</div>Initiates only when dragging handle.
Example :<div ngxDrag>
<span>drag me</span>
<span ngxDragHandle>handle</span>
</div>A simple resize works only via scrolling or using two fingers on touch devices.
Example :<div ngxResize>resize me</div>Resize using borders, and style all elements as desired.
Example :<div ngxResize>
<span>resize me</span>
<div [ngxResizeHandle]="NgxResizeHandleType.TopLeft"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.Top"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.TopRight"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.Right"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.BottomRight"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.Bottom"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.BottomLeft"></div>
<div [ngxResizeHandle]="NgxResizeHandleType.Left"></div>
</div>You can find more examples in the demo app