Question

我在我的项目中使用了角质材料拖放功能。在拖放工作精细的时候, 我遇到丢弃物品的问题。这些物品可以拖放, 但是当我想把它们丢入投放区时, 这些物品会移到前一个区域, 而不是目标区域。

我做错什么了?

以下是我代码的简化版本:

< 强势> task- statatat- list. 构件.html

<div cdkDropListGroup class="task-status-list-container">
  @for (taskStatus of Object.values(TASK_STATUSES); track taskStatus.key) {
  <app-task-status [taskStatus]="taskStatus"></app-task-status>
  }
</div>

< 加固> task- statatus. compect.html

<div class="task-status-container">
  <div class="title-container">
    <div class="title">{{ taskStatus.value }}</div>
  </div>

  <div
    cdkDropList
    [cdkDropListData]="assignTasksByStatus(taskStatus.key)"
    (cdkDropListDropped)="drop($event)"
    class="task-status-container-body"
  >
    @for (task of assignTasksByStatus(taskStatus.key);track task.id) {
    <app-task cdkDrag [task]="task"></app-task>
    }
  </div>
</div>

<强>task- statatus. 构件

export class TaskStatusComponent {
  protected readonly TASK_STATUSES = TASK_STATUSES;
  @Input() taskStatus!: TaskStatus;
  tasksSubscription!: Subscription;
  tasks: Task[] = [
    { id: 1, title:  Task 1 , status: TASK_STATUSES[ TO_DO ] },
    { id: 2, title:  Task 2 , status: TASK_STATUSES[ TO_DO ] },
    { id: 3, title:  Task 3 , status: TASK_STATUSES[ DONE ] },
  ];

  drop(event: CdkDragDrop<Task[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

  public assignTasksByStatus(status: string): Task[] {
    return this.tasks.filter((task) => task.status.key === status);
  }
}

<强度>task. 组件.html

<div class="title">{{ task.title }}</div>

<强 > task. 组件.ts

export class TaskComponent {
  @Input() task!: Task;
}

Answer 1

You need to import the standalone component: CdkDropListGroup in your TaskStatusListComponent.

import { CdkDropListGroup } from  @angular/cdk/drag-drop ;

@Component({
  selector:  app-task-status-list ,
  standalone: true,
  imports: [TaskStatusComponent, CdkDropListGroup],
  ...
})
export class TaskStatusListComponent {
  ...
}

In your TaskStatusComponent, I would suggest that splits the tasks by status (tasksByStatus) instead of sharing the data in a single tasks array. This aims that each CdkDropList component instance has their own dataset.

export class TaskStatusComponent {
  ...

  tasksByStatus!: { [key: string]: Task[] };

  ngOnInit() {
    this.tasksByStatus = Object.keys(TASK_STATUSES).reduce((acc, cur) => {
      acc[cur] = this.tasks.filter((x) => x.status.key === cur);

      return acc;
    }, {} as { [key: string]: Task[] });
  }

  public assignTasksByStatus(status: string): Task[] {
    return this.tasksByStatus[status];
  }

  ...
}

< a href=" "https://stackblitz.com/edit/stackblitz-starters-29lgd7? file=src% 2Fapp% 2Ftask- status- list% 2Ftask- status% 2Ftask- status% 2Ftask- status. html" rel=" nofollow noreferrerr" > Demo@ StackBlitz

友情链接