Блог

Вопрос о пакете cdk angular: я хотел бы перетащить красный div «drag me» (см. Ниже) в синюю область перетаскивания, только если условие удаления верно.

Мое перетаскивание работает нормально (так что библиотека cdk загружена правильно), но мое удаление не работает, мой метод enterPredicate () никогда не вызывается. Есть идеи? (ссылка cdk)

app.component.html

 import { Component } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove, CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of heroes';
  state = '';
  position = '';

  dragStarted(event: CdkDragStart) {
    this.state = 'dragStarted';
  }

  dragEnded(event: CdkDragEnd) {
    this.state = 'dragEnded';
  }

  dragMoved(event: CdkDragMove) {
    this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

  dropped(event: CdkDragDrop<string[]>) {
    console.log("dropped");
  }

  enterPredicate(drag?: CdkDrag, drop?: CdkDropList) {

    return false;
  };
}

  

app.component.html

 <h1>{{title}}</h1>

<!--  ITEM TO BE DRAGGED -->
<div cdkDrag class="drag-box"
     (cdkDragStarted)="dragStarted($event)"
     (cdkDragEnded)="dragEnded($event)"
     (cdkDragMoved)="dragMoved($event)">
  drag me
</div>

<p>{{state}} {{position}}</p>

<!--   DROP  ZONE -->
<div cdkDropList
     (cdkDropListDropped)="dropped($event)"
     style="background-color:lightblue; width: 200px; height: 200px"
     [cdkDropListEnterPredicate]="enterPredicate(drag, cdkDropList)"
     >
  DROP   ZONE
</div>

<app-heroes></app-heroes>
<app-messages></app-messages>

  

Я бы хотел, чтобы удаление выполнялось, только если значение enterPredicate () равно true.

Я подозреваю, что вам нужен T в определении вашей функции.

 enterPredicate(drag?: CdkDrag<string>, drop?: CdkDropList<string[]>)
  

У меня это не работало, пока я не добавил типы.