각도 방향으로 자유롭게 드래그하기 위한 명령 생성

42149 단어 draggabledirectiveangulartypescript
본고에서 우리는 Angular에서 명령을 만드는 방법을 배워서 제3자 라이브러리를 사용하지 않고 요소를 자유롭게 드래그할 수 있도록 할 것이다.

인코딩을 시작해보도록 하겠습니다.


1 기본 자유 드래그 명령 만들기


우리는 우선 간단한 기본 명령을 만들고 더 많은 기능을 추가할 것이다.

1.1 작업공간 만들기


npm i -g @angular/cli
ng new angular-free-dragging --defaults --minimal

Do not use --minimal option in production applications, it creates a workspace without any testing frameworks. You can read more about CLI options.


1.2 공유 모듈 만들기


ng g m shared

1.3.1 자유 드래그 명령 만들기


ng g d shared/free-dragging

1.3.2 수출지령


만든 후 공유 모듈의 내보내기 배열에 추가합니다.
// src/app/shared/shared.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FreeDraggingDirective } from "./free-dragging.directive";

@NgModule({
  declarations: [FreeDraggingDirective],
  imports: [CommonModule],
  exports: [FreeDraggingDirective], // Added
})
export class SharedModule {}

1.3.3 자유 드래그 논리


자유롭게 드래그하려면 다음과 같이 하십시오.
  • 감청 요소의mousedown 사건.이것은 드래그 시작 트리거로 사용할 것입니다.
  • 문서의 mousemove 이벤트를 듣습니다.이것은 드래그 트리거로 작동합니다.또한 마우스 포인터를 기준으로 요소의 위치도 업데이트됩니다.
  • 문서의 mouseup 이벤트를 듣습니다.이것은 드래그 끝 트리거로 사용할 것입니다.이것으로 우리는 청취를 중지할 것이다mousemove사건.
    • 상기 모든 청중에게 우리는 관찰할 수 있는 것을 만들 것이다.그러나 우선 우리의 지령을 설정하자.
    // src/app/shared/free-dragging.directive.ts

@Directive({
  selector: "[appFreeDragging]",
})
export class FreeDraggingDirective implements OnInit, OnDestroy {
  private element: HTMLElement;

  private subscriptions: Subscription[] = [];

  constructor(
    private elementRef: ElementRef,
    @Inject(DOCUMENT) private document: any
  ) {}

  ngOnInit(): void {
    this.element = this.elementRef.nativeElement as HTMLElement;
    this.initDrag();
  }

  initDrag(): void {
    // main logic will come here
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach((s) => s.unsubscribe());
  }
}
    위 코드에서 우리는 주로 세 가지 일을 한다.
  • 나중에 위치를 변경할 수 있도록 원본 HTML 요소를 가져옵니다.
  • 모든 드래그를 시작합니다. 자세한 내용은 곧 확인할 수 있습니다.
  • 삭제할 때 저희는 구독을 취소하여 자원을 방출하고 있습니다.
    • 드래그 함수를 작성합니다.
    // src/app/shared/free-dragging.directive.ts

...

  initDrag(): void {
    // 1
    const dragStart$ = fromEvent<MouseEvent>(this.element, "mousedown");
    const dragEnd$ = fromEvent<MouseEvent>(this.document, "mouseup");
    const drag$ = fromEvent<MouseEvent>(this.document, "mousemove").pipe(
      takeUntil(dragEnd$)
    );

    // 2
    let initialX: number,
      initialY: number,
      currentX = 0,
      currentY = 0;

    let dragSub: Subscription;

    // 3
    const dragStartSub = dragStart$.subscribe((event: MouseEvent) => {
      initialX = event.clientX - currentX;
      initialY = event.clientY - currentY;
      this.element.classList.add('free-dragging');

      // 4
      dragSub = drag$.subscribe((event: MouseEvent) => {
        event.preventDefault();

        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;

        this.element.style.transform =
          "translate3d(" + currentX + "px, " + currentY + "px, 0)";
      });
    });

    // 5
    const dragEndSub = dragEnd$.subscribe(() => {
      initialX = currentX;
      initialY = currentY;
      this.element.classList.remove('free-dragging');
      if (dragSub) {
        dragSub.unsubscribe();
      }
    });

    // 6
    this.subscriptions.push.apply(this.subscriptions, [
      dragStartSub,
      dragSub,
      dragEndSub,
    ]);
  }

...
  • 우리는 탐지기를 위해 3개의 관찰 대상을 만들고 있는데 이것은 우리가 이전에 사용한 [fromEvent](https://rxjs.dev/api/index/function/fromEvent) 함수에서 본 것이다.
  • 그리고 보조 변수를 만들었습니다. 이 변수는 요소의 위치를 업데이트하는 데 사용됩니다.
  • 다음에 우리는 mousedown 우리 요소에 관한 사건을 들을 것이다.사용자가 마우스를 누르면, 우리는 초기 위치를 저장하고, 클래스 free-dragging 를 추가합니다. 이 클래스는 요소에 아름다운 음영을 추가합니다.
  • 사용자가 요소를 눌렀을 때만 이동하려고 합니다. 이것이 바로 우리가 mousemove 이벤트의 구독 서버에서 mousedown 이벤트를 감청하는 이유입니다.사용자가 마우스를 이동할 때, 우리도 transform 속성을 사용하여 마우스의 위치를 업데이트합니다.
  • 우리는 mouseup 사건을 듣고 있다.여기서 다음 드래그를 위해 초기 위치를 다시 업데이트합니다.free-dragging 클래스를 삭제하고 있습니다.
  • 마지막으로 모든 구독을 전송하고 있습니다. 그러면 all inngOnDestroy에서 구독을 취소할 수 있습니다.
    • AppComponent에서 시도해 볼 때가 되었다.

    1.3.4 AppComponent 업데이트


    컨텐트를 다음과 같이 바꿉니다.
    // src/app/app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  // 1 use directive
  template: ` <div class="example-box" appFreeDragging>Drag me around</div> `,
  // 2 some helper styles
  styles: [
    `
      .example-box {
        width: 200px;
        height: 200px;
        border: solid 1px #ccc;
        color: rgba(0, 0, 0, 0.87);
        cursor: move;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: #fff;
        border-radius: 4px;
        position: relative;
        z-index: 1;
        transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
          0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      }

      .example-box.free-dragging {
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
          0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
      }
    `,
  ],
})
export class AppComponent {}
    위의 코드는 매우 간단명료하다.이를 실행하려면 다음과 같이 하십시오.
    ng serve
    출력을 보려면 다음과 같이 하십시오.

    현재 명령에서는 요소의 아무 곳에서나 마우스를 누른 채 이동하여 요소를 드래그할 수 있습니다.이렇게 하는 것은 텍스트 선택 등 다른 조작에서 매우 어렵다는 단점이 있다.더 실제적인 장면에서, 예를 들어 작은 위젯 같은 경우, 드래그를 편리하게 하기 위해 손잡이가 필요하다.

    2. 드래그 핸들 지원 추가


    우리는 명령을 다시 만들고 주 명령에 @ContentChild 접근해서 드래그 핸들에 대한 지원을 추가할 것입니다.

    2.1 드래그 핸들에 대한 명령 생성


    ng g d shared/free-dragging-handle

    2.2 공유 모듈에서 내보내기


    // src/app/shared/shared.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FreeDraggingDirective } from "./free-dragging.directive";
import { FreeDraggingHandleDirective } from './free-dragging-handle.directive';

@NgModule({
  declarations: [FreeDraggingDirective, FreeDraggingHandleDirective],
  imports: [CommonModule],
  exports: [FreeDraggingDirective, FreeDraggingHandleDirective], // Modified
})
export class SharedModule {}

    2.3 드래그 핸들에서 ElementRef로 돌아가기


    우리는 draghandle의 요소만 있으면 다음 작업을 완성할 수 있으며 ElementRef 를 사용하여 같은 기능을 실현할 수 있다.
    // src/app/shared/free-dragging-handle.directive.ts

import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[appFreeDraggingHandle]",
})
export class FreeDraggingHandleDirective {
  constructor(public elementRef: ElementRef<HTMLElement>) {} // Modified
}

    2.4 손잡이로 드래그


    논리는 다음과 같습니다.
  • 주 요소
    • 에서 하위 드래그 핸들 요소 가져오기
  • 문단 원소의 mousedown 사건을 탐지하다.이것은 드래그 시작 트리거로 사용할 것입니다.
  • 문서의 mousemove 이벤트를 듣습니다.이것은 드래그 트리거로 작동합니다.또한 마우스 포인터에 따라 핸들 요소뿐만 아니라 주 요소의 위치도 업데이트됩니다.
  • 문서의 mouseup 이벤트를 듣습니다.이것은 드래그 끝 트리거로 사용할 것입니다.이것으로 우리는 청취를 중지할 것이다mousemove사건.
    • 그래서 기본적으로 유일한 변화는 요소를 바꾸는 것이다. 우리는 그 중에서 mousedown 사건을 들을 것이다.
    인코딩으로 돌아가겠습니다.
    // src/app/shared/free-dragging.directive.ts

...

@Directive({
  selector: "[appFreeDragging]",
})
export class FreeDraggingDirective implements AfterViewInit, OnDestroy {

  private element: HTMLElement;

  private subscriptions: Subscription[] = [];

  // 1 Added
  @ContentChild(FreeDraggingHandleDirective) handle: FreeDraggingHandleDirective;
  handleElement: HTMLElement;

  constructor(...) {}

  // 2 Modified
  ngAfterViewInit(): void {
    this.element = this.elementRef.nativeElement as HTMLElement;
    this.handleElement = this.handle?.elementRef?.nativeElement || this.element;
    this.initDrag();
  }

  initDrag(): void {
    // 3 Modified
    const dragStart$ = fromEvent<MouseEvent>(this.handleElement, "mousedown");

    // rest remains same

  }

  ...

}
    우리가 한 것은 코드가 논리에서 설명한 것과 같다.현재 우리가 사용하고 있는 것은 ngOnInit이 아니라 ngAfterViewInit입니다. 구성 요소의 보기가 완전히 초기화되었는지 확인하고 싶으므로 존재하면 FreeDraggingDirective를 얻을 수 있습니다.너는 Angular - Hooking into the component lifecycle에서 이 방면에 관한 더 많은 정보를 읽을 수 있다.

    2.5 AppComponent 업데이트


    // src/app/app.component.ts

@Component({
  selector: "app-root",
  template: `
    <!-- 1 use directive -->
    <div class="example-box" appFreeDragging>
      I can only be dragged using the handle

      <!-- 2 use handle directive -->
      <div class="example-handle" appFreeDraggingHandle>
        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path
            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"
          ></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </div>
    </div>
  `,
  // 3 helper styles
  styles: [
    `
      .example-box {
        width: 200px;
        height: 200px;
        padding: 10px;
        box-sizing: border-box;
        border: solid 1px #ccc;
        color: rgba(0, 0, 0, 0.87);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: #fff;
        border-radius: 4px;
        position: relative;
        z-index: 1;
        transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
          0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      }

      .example-box.free-dragging {
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
          0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
      }

      .example-handle {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ccc;
        cursor: move;
        width: 24px;
        height: 24px;
      }
    `,
  ],
})
export class AppComponent {}
    출력을 살펴보겠습니다.

    다행이다. 우리는 우리가 필요로 하는 것을 거의 실현했다.
    그러나 그것은 여전히 문제가 있다.사용자는 요소를 뷰 외부로 이동할 수 있습니다.

    3. 경계 드래그 지원 추가


    국경에 대한 지원을 추가할 때가 되었다.경계는 요소를 원하는 영역 내에 유지하는 데 도움을 줍니다.

    3.1 업데이트 명령


    우리는 이러한 경계를 지지할 것이다.
  • 사용자 정의 경계 요소 조회를 설정하기 위해 @Input 를 추가합니다.기본적으로 우리는 그것을 body에 유지한다.
  • 우리가 querySelector 로 경계원을 얻을 수 있는지 검사합니다. 만약 오류가 발생하지 않았다면.
  • 경계 요소의 레이아웃 높이와 너비를 사용하여 드래그된 요소의 위치를 조정합니다.
    • // src/app/shared/free-dragging.directive.ts

...

@Directive({
  selector: "[appFreeDragging]",
})
export class FreeDraggingDirective implements AfterViewInit, OnDestroy {

  ...

  // 1 Added
  private readonly DEFAULT_DRAGGING_BOUNDARY_QUERY = "body";
  @Input() boundaryQuery = this.DEFAULT_DRAGGING_BOUNDARY_QUERY;
  draggingBoundaryElement: HTMLElement | HTMLBodyElement;

  ...

  // 2 Modified
  ngAfterViewInit(): void {
    this.draggingBoundaryElement = (this.document as Document).querySelector(
      this.boundaryQuery
    );
    if (!this.draggingBoundaryElement) {
      throw new Error(
        "Couldn't find any element with query: " + this.boundaryQuery
      );
    } else {
      this.element = this.elementRef.nativeElement as HTMLElement;
      this.handleElement =
        this.handle?.elementRef?.nativeElement || this.element;
      this.initDrag();
    }
  }

  initDrag(): void {
    ...

    // 3 Min and max boundaries
    const minBoundX = this.draggingBoundaryElement.offsetLeft;
    const minBoundY = this.draggingBoundaryElement.offsetTop;
    const maxBoundX =
      minBoundX +
      this.draggingBoundaryElement.offsetWidth -
      this.element.offsetWidth;
    const maxBoundY =
      minBoundY +
      this.draggingBoundaryElement.offsetHeight -
      this.element.offsetHeight;

    const dragStartSub = dragStart$.subscribe((event: MouseEvent) => {
      ...

      dragSub = drag$.subscribe((event: MouseEvent) => {
        event.preventDefault();

        const x = event.clientX - initialX;
        const y = event.clientY - initialY;

        // 4 Update position relatively
        currentX = Math.max(minBoundX, Math.min(x, maxBoundX));
        currentY = Math.max(minBoundY, Math.min(y, maxBoundY));

        this.element.style.transform =
          "translate3d(" + currentX + "px, " + currentY + "px, 0)";
      });
    });

    const dragEndSub = dragEnd$.subscribe(() => {
      initialX = currentX;
      initialY = currentY;
      this.element.classList.remove("free-dragging");
      if (dragSub) {
        dragSub.unsubscribe();
      }
    });

    this.subscriptions.push.apply(this.subscriptions, [
      dragStartSub,
      dragSub,
      dragEndSub,
    ]);
  }
}
    요소를 드래그할 수 있도록 body의 높이를 100%로 설정해야 합니다.
    // src/styles.css

html,
body {
  height: 100%;
}
    이제 출력을 살펴보겠습니다.

    이렇게!영예🎉😀👍

    결론


    빠르게 수정:
    ✔️ 우리는 자유 드래그 명령을 만들었다
    ✔️ 그런 다음 사용자가 요소에 대해 다른 작업을 수행할 수 있도록 드래그 핸들에 대한 지원이 추가되었습니다.
    ✔️ 마지막으로 경계 요소를 추가하여 요소를 특정 경계 안으로 드래그하는 데 도움이 됩니다.
    ✔️ 이 모든 것은 제3자 창고가 없다😉
    추가 기능을 추가할 수 있는 기능은 다음과 같습니다.
  • 잠금 축 - 수평 또는 수직 방향으로만 드래그할 수 있음
  • 이벤트 - 드래그 시작, 드래그 및 드래그 끝과 같은 각 동작에 이벤트를 생성합니다
    • .
  • 위치 재설정 - 드래그를 원래 위치로 이동
    • 작은 위젯, 채팅 상자, 도움말, 작은 위젯 지원 등 다양한 상황에서 이 드래그 기능을 사용할 수 있습니다. 드래그 요소 (제목, 단추 등) 를 지원하는 기능을 갖춘 편집기를 구축할 수 있습니다.
    Github에 제공된 모든 코드는 다음과 같습니다.

    슈다만 / 모서리 자유 드래그


    Angular에서 모든 요소를 자유롭게 드래그할 수 있는 명령을 만듭니다. 제3자 라이브러리를 사용하지 않아도 됩니다.


    각도 방향으로 자유롭게 드래그하기 위한 명령 생성



    본고에서 우리는 Angular에서 명령을 만드는 방법을 배워서 제3자 라이브러리를 사용하지 않고 요소를 자유롭게 드래그할 수 있도록 할 것이다.

    읽다


    이 코드는 indepth에 있는 글을 위한 것입니다.데이브, Create a directive for free dragging in Angular 에서 읽을 수 있습니다.

    발전시키다


    git 클론https://github.com/shhdharmen/angular-free-dragging.git
    모서리 없는 드래그
    npm i
    npm 시작
    View on GitHub
    본문을 읽어 주셔서 감사합니다.평론 부분에서 너의 생각과 피드백을 나에게 말해라.

    크레디트


    본문을 작성할 때, 나는 w3schools와 stackoverflow의 코드 세션을 참고했다.
    docker multipstage build 및 Docker Hub
    Laravel에서 동적 원형 차트를 만드는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage