ng2-dragula 새 항목을 추가 한 후 상단에 표시됩니다.

debugcn 에 게시 Dev

프라 샨트 사잔

드래그 앤 드롭 기능에 ng2-dragula를 사용하고 있습니다. 마지막에 첫 번째 요소 (또는 모든 요소)를 끌어다 놓은 다음 addNewItem 버튼을 사용하여 배열에 새 항목을 추가하려고하면 문제가 발생합니다. 새 항목이 끝에 추가되지 않습니다. 요소를 끝까지 놓지 않으면 UI 끝에 새 항목이 추가됩니다. 어떤 시나리오에서든 새 항목이 맨 아래에 표시되기를 원합니다. 도움을 주시면 감사하겠습니다. 이 문제는 Angular 7에서 재현 할 수 없습니다. Angular 9에서 이런 일이 발생하는 것을 확인했습니다.

export class SampleComponent {

  items = ['Candlestick','Dagger','Revolver','Rope','Pipe','Wrench'];
  constructor(private dragulaService: DragulaService) { 
    dragulaService.createGroup("bag-items", {
      removeOnSpill: false
    });
  }

  public addNewItem() {
    this.items.push('New Item');
  }
}

HTML

<div class="container" [dragula]='"bag-items"' [(dragulaModel)]='items'>
    <div *ngFor="let item of items">{{ item }}</div> 
</div>

<button id = "addNewItem"(click) = "addNewItem ()"> 새 항목 추가

문제를 시각화하는 데 도움이되도록 주석에서 stackblitz를 편집했습니다. 이것은 유닛을 목록의 맨 아래로 끌 때 트리거되는 것 같습니다. 업데이트 된 stackblitz : https://stackblitz.com/edit/ng2-dragula-base-ykm8fz?file=src/app/app.component.html Item AddedOutOfOrder

Yurzui

드롭시 이전 항목 위치를 복원 할 수 있습니다.

constructor(private dragulaService: DragulaService) {
  this.subscription = this.dragulaService.drop().subscribe(({ name }) => {
    this.dragulaService.find(name).drake.cancel(true);
  });
}

갈래 Stackblitz

설명

Ivy와 ViewEngine이 특정 인덱스에 ViewRef를 삽입하는 방법에는 약간의 차이가 있습니다. 그들은 다른 beforeNode에서 중계합니다.

Ivy는 항목을 끝에 추가하면 항상 ViewContainer host (Comment node) ^ref를 반환합니다 .

export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode|
    null {
  const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
  if (nextViewIndex < lContainer.length) {
    const lView = lContainer[nextViewIndex] as LView;
    const firstTNodeOfView = lView[TVIEW].firstChild;
    if (firstTNodeOfView !== null) {
      return getFirstNativeNode(lView, firstTNodeOfView);
    }
  }

  return lContainer[NATIVE]; <============================= this one
}

ViewEngine은 마지막으로 렌더링 된 노드 (마지막 <li/>요소) ^참조를 반환합니다.

function renderAttachEmbeddedView(
    elementData: ElementData, prevView: ViewData|null, view: ViewData) {
  const prevRenderNode =
      prevView ? renderNode(prevView, prevView.def.lastRenderRootNode!) : elementData.renderElement;
  ...
}

해결책은 드래그 된 요소를 원래 컨테이너로 되돌려 내장 된 ngForOfAngular 지시문이 스마트 디핑을 수행 하도록 할 수 있습니다 .

Btw, 동일한 기술이 Angular 재질에 사용됩니다 DragDropModule. 드래그하는 요소의 위치를 기억하고 항목을 드롭 한 후 DOM의 이전 위치에 삽입합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

ng2-dragula 새 항목을 추가 한 후 상단에 표시됩니다.

ng2-dragula 새 항목을 추가 한 후 상단에 표시됩니다.

설명

새 통합 문서를 추가 한 후 항상 사용자 양식이 맨 위에 표시됩니다.

ObservableCollection에 새 항목을 추가 한 후 ListView가 즉시 업데이트되지 않습니다.

새 항목을 추가 한 후 UITableView가 새로 고쳐지지 않습니다.

Angular 2-새 항목을 추가 한 후 Firebase 목록을 뒤집는 방법

Vue.js : 새 항목을 추가 한 후 목록에서 항목을 제거하면 버그가 발생했습니다.

내 json 파일에 PHP로 새 배열을 정렬하고 저장 한 후 ArrayArrayArray가 표시됩니다.

목록 상자에 항목을 추가 한 다음 30 초 후에 제거

Angular는 새 항목을 추가 한 후 테이블을 새로 고치지 않습니다.

RecyclerView 항목을 클릭하면이 항목에 대한 정보와 함께 새 활동이 표시됩니다.

관련 테이블에 새 항목을 추가 한 후 Android RealmDB에서 행이 자동으로 삭제됩니까?

한 목록의 두 항목을 Python의 새 목록에 추가

데이터베이스 React Router에 항목을 추가 한 후 데이터가 새로 고쳐지지 않음

데이터베이스에 항목을 추가 한 후 Blazor 구성 요소가 새로 고쳐지지 않음

새 OS 항목을 삽입 한 후 GRUB2에서 암호를 묻습니다.

상위 행에 새 하위 행을 추가하는 데 문제가 있습니다. 새 행은 항상 시트 하단에 추가됩니다.

항목을 클릭 할 때마다 장바구니에 추가됩니다. Angular js에 새 '항목'을 추가하기 전에 이전에 추가 한 항목을 삭제해야합니다.

nativescript에서 socketio 이벤트가 발생한 후 새 항목을 lisview에 푸시하는 방법

Ionic / Angular 2 : 클릭시 새 항목 추가 후 배열 값 표시

reactjs에 항목을 추가 한 후 새로 고침하지 않고 테이블 업데이트

항목을 추가 한 후 NSMutableDictionary가 비어 있습니다.

목록보기를 스크롤 한 후 항목을 목록보기에 추가 할 수 없습니다.

장바구니 항목에 수량을 추가하면 새 항목이 추가됩니다.

선택한 관찰 대상을 새로 추가 된 항목에 연결하는 방법은 무엇입니까?

Google Maps Polygon-새 점을 추가 한 후 다시 그리기

목록에 새 항목을 추가하면 recyclerview가 새로 고쳐집니다.

배열 항목을 추가 한 다음 새 배열을 다시 평가

각 버튼 클릭 이벤트 후 새 항목을 추가하고 일반 목록에 이전 항목을 유지하는 방법은 무엇입니까?

Angularjs는 mdDialog를 사용하여 새로 고침하지 않고 http 게시물로 항목을 추가 한 후 데이터를 얻습니다.

새로운 반응 앱을 만들 수 없습니다. 아래에 이러한 오류가 표시됩니다.