Почему DragDrop работает в одном компоненте и не работает в другом?

У меня есть такой компонент:

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { OrderApplicationUI } from '../../models/application.list.model';
import { ListService } from '../../services/sorting.service';

@Component({
    selector: 'app-order-applications-list',
    templateUrl: './order-applications-list.component.html',
    styleUrls: ['./order-applications-list.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ListService],
})
export class OrderApplicationsListComponent implements OnInit {
    @Input() applications: OrderApplicationUI[] = [];
    @Output() onSelected = new EventEmitter<OrderApplicationUI[]>();

    constructor(private listService: ListService) {}

    ngOnInit(): void {
        this.listService.setItems(this.applications);
    }

    public drop(event: any): void {
        this.listService.drop(event);
    }

    public select(app: OrderApplicationUI): void {
        app.selected = !app.selected;
        this.onSelected.emit(this.applications.filter((app) => app.selected));
    }
}


Шаблон:

<div cdkDropList class="order__application__list" (cdkDropListDropped)="drop($event)">
    <div
        class="order__application__list__item"
        [ngClass]="{ order__application__list__item_selected: app.selected }"
        *ngFor="let app of applications; let i = index"
        (click)="select(app)"
        cdkDrag
    >
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{ app.value }}
    </div>
</div>
<div class="nodata" *ngIf="!applications || applications.length == 0">Нет данных</div>


Модуль:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderApplicationsListComponent } from './order-applications-list.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
    imports: [CommonModule, DragDropModule],
    declarations: [OrderApplicationsListComponent],
    exports: [OrderApplicationsListComponent],
})
export class OrderApplicationsListModule {}


Использование:
<app-order-applications-list  [applications]="block?.datasource?.value"></app-order-applications-list>


Почему этот drag drop работает не везде. Точнее сказать drag методы вызывается всегда - в консоли видно - какой элемент и куда перемещается. Но не срабатывает анимацию - показывающая свободное место - куда перемещается элемент. И визуально все остается на своих местах.

Если добавить в тот же самый компонент горизонтальный drag/drop - то он работает:

<div cdkDrag cdkDragLockAxis="x">
  I'm Draggable
</div>
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
GennadyS
@GennadyS
Программист, философ
Ох, такие вещи сложно анализировать, не имея на руках рабочего кода. Вы вот говорите, работает:
<div cdkDrag cdkDragLockAxis="x">
  I'm Draggable
</div>

— но это ведь не тот же код, что выше в рабочем примере. Где у Вас и стили накладываются, и есть обработчик click, который вполне может конфликтовать с механизмом drag&drop. Попробуйте убрать обработчик, а впоследствии заменить обработку click на событие CdkDragStart , но я не могу быть уверен в результате. Есть вариант перекрытия стилями, какой-то элемент выше оказывается, например.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 12:54
10000 руб./за проект
19 сент. 2020, в 12:04
1000 руб./в час
19 сент. 2020, в 11:26
17500 руб./за проект