SoFunction
Updated on 2025-04-08

Implement the function of freely adjusting the page size with handles

Since we are currently in an angular project, the following is a simple and easy-to-record version used in an angular project, for your reference only.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resizable Element with Angular Directive</title>
  <style>
    .resizable {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      border: 1px solid #ccc;
      overflow: auto;
      position: relative;
    }
    .resize-handle {
      width: 10px;
      height: 10px;
      background-color: #000;
      position: absolute;
      bottom: 0;
      right: 0;
      cursor: nwse-resize;
    }
  </style>
</head>
<body>
  <div ng-app="resizableApp">
    <div ng-controller="ResizableController">
      <div resizable></div>
    </div>
  </div>
  <script src="/ajax/libs/angularjs/1.8.2/"></script>
  <script>
    ('resizableApp', [])
      .controller('ResizableController', function($scope) {
        // Controller logic can be added here      })
      .directive('resizable', function() {
        return {
          restrict: 'A',
          link: function(scope, element) {
            const resizableElement = element[0];
            const resizeHandle = ('div');
            ('resize-handle');
            (resizeHandle);
            let isResizing = false;
            let initialX;
            let initialY;
            let originalWidth;
            let originalHeight;
            ('mousedown', function(event) {
              ();
              isResizing = true;
              initialX = ;
              initialY = ;
              originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));
              originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));
              ('mousemove', resize);
              ('mouseup', stopResize);
            });
            function resize(event) {
              if (isResizing) {
                const width = originalWidth + ( - initialX);
                const height = originalHeight + ( - initialY);
                 = width + 'px';
                 = height + 'px';
              }
            }
            function stopResize() {
              isResizing = false;
              ('mousemove', resize);
              ('mouseup', stopResize);
            }
          }
        };
      });
  </script>
</body>
</html>

In the Angular project

The above functions can be used in Angular projectsAs an Angular commandUse in components.

First, create a custom directive called `resizable`

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[resizable]'
})
export class ResizableDirective {
  private isResizing = false;
  private initialX: number;
  private initialY: number;
  private originalWidth: number;
  private originalHeight: number;
  constructor(private elementRef: ElementRef) {}
  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if () {
      const width =  + ( - );
      const height =  + ( - );
       = width + 'px';
       = height + 'px';
    }
  }
  @HostListener('document:mouseup')
  onMouseUp() {
     = false;
  }
  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    ();
     = true;
     = ;
     = ;
     = parseFloat(getComputedStyle().getPropertyValue('width'));
     = parseFloat(getComputedStyle().getPropertyValue('height'));
  }
}

Use this directive in component templates

<div resizable class="resizable"></div>

Finally, add `ResizableDirective` to your Angular module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizableDirective } from './';
import { AppComponent } from './';
@NgModule({
  declarations: [
    AppComponent,
    ResizableDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the article about implementing the function of freely adjusting page size with handles. For more relevant content on resizing page size, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!