Как принять / отказаться от капли с угловым - PullRequest
Новая
       13

Как принять / отказаться от капли с угловым

0 голосов
/ 01 апреля 2019

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

enter image description here

Мое перетаскивание работает нормально (поэтому библиотека 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.

...