每当我将数据拖放到完成列表时，我都希望长度/我掉落的物品数.完成列表中已有很多项目并假设我从待办事项"中拖放了两个项目列出要做的事列表，然后我希望我的计数为2.如果拖动了3个项目，掉线，那么我想算为3，依此类推.在我看来，我不想包含已经存在的数据.

whenever I drag and drop data to done list, I want to have the length/number of items I dropped. Done list already have many items in it and suppose I drag and drop two items from "To Do" list to done list then I want to have my count as 2. If 3 items dragged and dropped, then I want to have count as 3 and so on. Means in my count, I don't want to include data which is already present.

您可以创建一个计数器，以跟踪列表中插入的元素.这是代码:

You can create a counter which keeps the track of inserted elements in the list. Here is the code:

import { Component } from "@angular/core";
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from "@angular/cdk/drag-drop";

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: "cdk-drag-drop-connected-sorting-example",
  templateUrl: "cdk-drag-drop-connected-sorting-example.html",
  styleUrls: ["cdk-drag-drop-connected-sorting-example.css"]
})
export class CdkDragDropConnectedSortingExample {
  todo = [
    "Get to work",
    "Pick up groceries",
    "Go home",
    "Fall asleep",
    "Walk Dog",
    "Stretch",
    "Code Stuff",
    "Drag Stuff",
    "Drop Stuff",
    "Run",
    "Walk"
  ];

  done = ["Get up", "Brush teeth", "Take a shower", "Check e-mail", "Walk dog"];
  lastElementDragged = null;
  itemsDropped = 0;
  initialListLength = this.done.length; //get initial length

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
      
    } else {
      this.lastElementDragged = this.done.length;
       this.itemsDropped++;  // keep the track of item inserted
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        this.done.length
      );
    }
    console.log(this.getDroppedItems());
    console.log(this.itemsDropped); // counter of values dropped in
  }

  handleTodoItem(index: number): void {
    transferArrayItem(this.done, this.todo, index, this.todo.length);
    this.itemsDropped--; // decrement on every remove
    console.log(this.getDroppedItems())
  }

  getDroppedItems() {
    return this.done.slice(this.initialListLength) && this.done.slice(this.initialListLength).length ?
    this.done.slice(this.initialListLength) : 'Nothing Found'; 
  }

  }

每当我将数据拖放到完成列表"X"时，标记出现在最后项目仅按代码分类.假设我完成了拖放item1然后列出"X"将会出现在item1上，如果我放下item2，则"X"将要出现在item2上.如果"X"如果单击item2，则item2将被移动做"再次列出.由于我拖放了两个项目，因此用户点击"X"的情况在项目2上，然后是"X"；应该放在第1项上(应该不在完成列表中已经存在的项目上.

whenever I drag and drop data to done list "X" mark appearing on last item only as per code. suppose I dragged and dropped item1 in done list then "X" will appear on item1 and if I drop item2, then "X" will appear on item2. If "X" if clicked on item2 then item2 will be moved to "To do" list again. Since I dragged and dropped two items, so in case if user clicks "X" on item 2 then "X" should come on item1(should not come on items already present in done list).

现在，上面的计数器可以帮助我们跟踪需要显示"X"按钮的项目.这是代码:

Now, the above counter can help us to track on what items we need to show the 'X' button. Here is the code :

<div class="example-container">
  <h2>To do</h2>

  <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
    class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>
<br>
<div class="example-container">
  <h2>Done</h2>

  <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
    class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done; let i = index" cdkDrag>
      {{item}}
      <span *ngIf="i > initialListLength - 1"" (click)="handleTodoItem(i)">X</span>
    </div>
  </div>
</div>