从下拉列表中删除最新项目 [英] Removing latest item from drop list

问题描述

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

I am working on angular drag and drop. My Code is as follows

我要删除的项目将始终在完成列表的末尾删除.我想要一个"X"在最新放置的项目上标记(假设用户拖放项目1，则"X"应位于项目1上，如果用户拖放项目2，则"X"应仅在项目2上)，以便如果用户希望用户可以单击"X"并且从完成列表中删除该项目，并返回到待办事项"列表.再次列出.

The item which I am dropping will always be dropped at end of done list. I want to have a "X" mark on latest item dropped(suppose user drags and drops item1 then "X" should be on items1 and if user drags and drops item2 then "X" should be only on item2) so that if user wishes user can click on "X" and item is removed from done list and get back to the "TO DO" list again.

推荐答案

我进行了更改.所以我在这里粘贴HTML和TS代码.我不确定代码是否保存在stackblitz中.

I have made the changes. So I am pasting the HTML and TS code here. I am unsure if the code saves on the stackblitz.

在组件文件 cdk-drag-drop-connected-sorting-example.ts :

import { Component, OnInit } 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  implements OnInit{
  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"];

  public DroppedListLength;  // tracking the length of the list


ngOnInit() {
  this.DroppedListLength = this.done.length;
}

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      console.log("first if..");
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        this.done.length
      );
      console.log("second if..");
      this.DroppedListLength = this.done.length; // update the list length for any drop
    }
  }
// just add a function to remove the last added value
  removeLastDroppedItem() {
    this.done.pop();
this.DroppedListLength = this.done.length; // you can add this to keep track of last item in the list
  }
}

在html cdk-drag-drop-droped-connected-sorting-example.html 中，您只需要添加一个按钮并将其点击与上述功能相关联即可:

In html cdk-drag-drop-connected-sorting-example.html you only need to add a button and associate its click with the above function:

<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+1 === DroppedListLength" (click)="removeLastDroppedItem()">X</span></div>
    </div>
</div>

注意:您可以更新这些文件，并且应该可以正常工作.

Note: you can update these files and it should work as intended.

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