Angular.js 实现带手柄自由调整页面大小的功能

2023-12-22 18:45:20

? ? ? ? 因为目前是处于在angular项目中，所以下面分别一个记录简易的angular.js和在angular项目中使用的版本，仅供大家参考。

Angular.js

<!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="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    angular.module('resizableApp', [])
      .controller('ResizableController', function($scope) {
        // 可以在这里添加控制器逻辑
      })
      .directive('resizable', function() {
        return {
          restrict: 'A',
          link: function(scope, element) {
            const resizableElement = element[0];
            const resizeHandle = document.createElement('div');
            resizeHandle.classList.add('resize-handle');
            resizableElement.appendChild(resizeHandle);

            let isResizing = false;
            let initialX;
            let initialY;
            let originalWidth;
            let originalHeight;

            resizeHandle.addEventListener('mousedown', function(event) {
              event.preventDefault();
              isResizing = true;
              initialX = event.clientX;
              initialY = event.clientY;
              originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));
              originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));

              document.addEventListener('mousemove', resize);
              document.addEventListener('mouseup', stopResize);
            });

            function resize(event) {
              if (isResizing) {
                const width = originalWidth + (event.clientX - initialX);
                const height = originalHeight + (event.clientY - initialY);
                resizableElement.style.width = width + 'px';
                resizableElement.style.height = height + 'px';
              }
            }

            function stopResize() {
              isResizing = false;
              document.removeEventListener('mousemove', resize);
              document.removeEventListener('mouseup', stopResize);
            }
          }
        };
      });
  </script>
</body>
</html>

在Angular项目中

????????在 Angular 项目中可以将上述功能作为 Angular 指令在组件中使用。

  1. 首先，创建一个名为 `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 (this.isResizing) {
? ? ? const width = this.originalWidth + (event.clientX - this.initialX);
? ? ? const height = this.originalHeight + (event.clientY - this.initialY);
? ? ? this.elementRef.nativeElement.style.width = width + 'px';
? ? ? this.elementRef.nativeElement.style.height = height + 'px';
? ? }
? }

? @HostListener('document:mouseup')
? onMouseUp() {
? ? this.isResizing = false;
? }

? @HostListener('mousedown', ['$event'])
? onMouseDown(event: MouseEvent) {
? ? event.preventDefault();
? ? this.isResizing = true;
? ? this.initialX = event.clientX;
? ? this.initialY = event.clientY;
? ? this.originalWidth = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('width'));
? ? this.originalHeight = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('height'));
? }
}
  2. 在组件模板中使用该指令 
    <div resizable class="resizable"></div>
  3. 最后，将 `ResizableDirective` 添加到您的 Angular 模块中 
    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizableDirective } from './resizable.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ResizableDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

文章来源:https://blog.csdn.net/qq_44327851/article/details/135006750
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。