获取已删除项目的计数并从下拉列表中删除最近的项目 [英] getting count of dropped items and removing recent items from drop list

问题描述

我正在做角度拖放.我的代码如下.

I am working on angular drag and drop. my code is as follows.

我在这方面面临两个问题.

I am facing two issues in this.

1. 每当我将数据拖放到完成"列表时，我都想知道要放入的项目的长度/数量.完成列表中已经有很多项目，并且假设我从待办事项"中拖放了两个项目.列出要完成的列表，那么我希望将其计数为2.如果拖放了3个项目，那么我希望将计数为3，依此类推.用我的意思是，我不想包含已经存在的数据.

1. 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.

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

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).

我该怎么办?

推荐答案

每当我将数据拖放到完成列表时，我都希望长度/我掉落的物品数.完成列表中已有很多项目并假设我从待办事项"中拖放了两个项目列出要做的事列表，然后我希望我的计数为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>

这篇关于获取已删除项目的计数并从下拉列表中删除最近的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！