angular 사용 원생 드래그 페이지 카드 및 폼 컨트롤 입력 지연 문제 해결

설명 하 다.
이전에 angular 프로젝트 가 있 었 는데 페이지 에 표 가 많 지 않 고 100 여 개(이것 은 고정 되 지 않 고 어떤 곳 은 많 고 어떤 곳 은 적다)였 지만 다시 입력 할 때 입력 이 지연 되 고 반응 이 민감 하지 않 아 사용자 체험 에 매우 좋 지 않 았 다.또 하나의 기능 은 드래그 기능(원생,공식 적 인 드래그 기능 을 사용 하지 않 음)이다.왼쪽 에서 오른쪽 구역 으로 끌 면 드래그 구역 이 적 을 때 유창 하지만 수백 수천 에 달 할 때 반응 이 매우 느리다.
원인
위의 두 문 제 는 사실 모두angular의 메커니즘 과 관계 가 있다.하나의 양 방향 연결,하나의 드래그 는 결국angular의 변화 검 측 때 문 입 니 다.
angular 의 양 방향 연결 은 주로 더러 운 데이터 검사 로 대량의 검 사 를 하면 효율 이 비교적 낮다.(양 방향 바 인 딩 시 zone 에 비동기 함 수 를 마 운 트 합 니 다.데이터 변 화 를 처리 하고 변화 피드백 을 페이지 에 표시 합 니 다)입력 이 지연 될 수 있 습 니 다.
드래그(zone 에 비동기 함 수 를 마 운 트 하 는 것 이기 도 합 니 다)는angular모든 픽 셀 을 이동 할 수 있 는 요 소 를 검 측 할 수 있 고 dom 에 대한 조작 과 관련 될 수 있 습 니 다.드래그 구역 의 수량 이 많 을 때 바 인 딩 함수 가 많아 집 니 다.angular검 측 해 야 할 요소 구역 이 점점 많아 집 니 다.처리 하면 할 수록 힘 에 부친 다(원소 가 숨겨 져 있어 도 변화 검 사 를 하지 않 는 다 는 뜻 은 아니다)
해결 하 다.

양 방향 귀속 으로 인 한 입력 지연,양 방향 귀속 사용 정지,단 방향 귀속 으로 변경

드래그 과정 에서 angular 는 페이지 변 화 를 계속 감지 하기 때문에 페이지 가 끊 겼 습 니 다.우리 가 해 야 할 일 은 어떤 조작 에 대해 추적 하지 않 고 변 화 를 설정 하 는 것 이다

.

this.ngZone.runOutsideAngular(() => {
  this.dragEnter = this.rd.listen(spanDom, 'dragenter', this.dragenterHandler.bind(this));
  this.dragOver = this.rd.listen(spanDom, 'dragover', (e) => {
   e.preventDefault();
  });
 this.dragLeave = this.rd.listen(spanDom, 'dragleave', this.dragLeaveHandle.bind(this));
});
this.dragDrop = this.rd.listen(spanDom, 'drop', this.dropHandler.bind(this));

잦 은 조작(예 를 들 어 dragover)에 대해 변경 검 사 를 실행 하지 않 습 니 다.NgZone중의runOutsideAngular방법 을 사용 하면angular안의 변 화 를 추적 하지 않 습 니 다.
ps:각도 요소 드래그 아래 보기

원 소 를 지정 한 구역 으로 끌 어 옵 니 다

드래그 앤 드 롭 과 동시에 데이터 전달

1.ng2-drag-drop 설치

npm install ng2-drag-drop --save

2.템 플 릿 에서 끌 수 있 는 요 소 를 설정 합 니 다.

 // drag.component.html
 <div>
  <a href="javascript:;" rel="external nofollow" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
 </div>

draggable-이 요 소 를 표시 할 때 끌 수 있 는

[dragdata]='item'-드래그 과정 에서 item 데 이 터 를 draggable 에서 droppable 까지

[dragScope]='시스템'-드래그 범위,세 번 째 단계[dropScope]='시스템'과 대응 합 니 다.

3.템 플 릿 에 드래그 요소 가 끌 어 당 기 는 목적 지 를 설정 합 니 다.

// drag.component.ts
 <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>

droppable-두 번 째 단계 에서 끌 어 당 기 는 요 소 는 droppable 명령 이 있 는 요소 로 끌 어 옵 니 다.

(onDrop)-요 소 를 이 영역 에 끌 어 다 놓 은 후(마우스 로 풀 면)onItemDrop 방법 을 터치 합 니 다.그 중에서$event 는 두 번 째 단계 에서[dragdata]='item'의 item 인자

입 니 다.

[dropScope]='시스템'-두 번 째 단계 의[dragScope]='시스템'에 대응 하여[dragScope]='시스템'의 드래그 요 소 는[dropScope]='시스템'요소 로 만 끌 수 있 습 니 다.

4.ts 파일

// drag.component.ts
export class DragComponent {

 const sysData = [
  {id: '1', name: '    1'},
  {id: '2', name: '    2'},
  {id: '3', name: '    3'},
  {id: '4', name: '    4'}
 ];

}

onItemDrop(e: any) {
 // data          - item
 const data = e.dragData;
}

총결산
이 글 은 angular 에서 네 이 티 브 드래그 페이지 를 사용 하 는 것 에 관 한 것 입 니 다.폼 컨트롤 의 입력 지연 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 angular 에 서 는 네 이 티 브 드래그 페이지 를 사용 하여 걸 립 니 다.폼 컨트롤 의 입력 지연 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!