删除列表项的删除选项

Question

我使用以下 HTML 和 Javascript 将列表项从一个 div 拖放到另一个 div。

HTML：

<div class="listArea">
   <h4> Drag and Drop list in Green Area: </h4>
   <ul class="unstyle">
      <li id="drag1" draggable="true" (dragstart)="drag($event)">
          i am list 1
      </li>
      <li id="drag2" draggable="true" (dragstart)="drag($event)">
          i am list 2 
      </li>
      <li id="drag3" draggable="true" (dragstart)="drag($event)">
          i am list 3
      </li>
      <li id="drag4" draggable="true" (dragstart)="drag($event)">
          i am list 4
      </li>
   </ul>
</div>
<div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)">
   <h4> Drop Here </h4> 
</div>

Typescript 包含以下内容：

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
  }

stackblitz 链接是 https://stackblitz.com/edit/angular-wyimor

我需要的是在我将列表项放入具有buildArea 类的 div 之后，可以删除列表项，即我需要为每个删除的项生成唯一的删除按钮，并且单击该按钮，必须删除当前列表。

从给定的 Demo 中删除绿色区域中的下拉列表项的选项需要完成。 我还需要只使用 pure javascript 并且 jquery 需要被忽略。

经过长时间的搜索，我找不到任何解决方案，因此请帮助我实现删除已删除列表项的期望输出。

Answer 1

试试这样的：

DEMO

  <div class="listArea">
    <h4> Drag and Drop list in Green Area: </h4>
    <ul class="unstyle">
        <li *ngFor="let li of List; let i = index" id="drag{{i}}" draggable="true" (dragstart)="drag($event, i) ">
            i am list {{li.name}}
        </li>
    </ul>
</div>


    <div class="buildArea " id="div1 " (drop)="drop($event) " (dragover)="allowDrop($event) ">
        <h4> Drop Here </h4>

        <ul class="unstyle">
            <li *ngFor="let li of DraggedList; let i = index" id="dragged{{i}}">
                <p>{{li.innerHTML}}</p>
                <button (click)="deleteItem(i)" type="button"> X</button>

            </li>
        </ul>
    </div>

TS：

List: Array<any> = [
    { name: 1 },
    { name: 2 },
    { name: 3 },
    { name: 4 },
    { name: 5 },
  ]
  elId: number;

  DraggedList: Array<any> = [

  ]

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev, i) {
    this.elId = i;
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    // ev.target.appendChild(document.getElementById(data).cloneNode(true));
    this.DraggedList.push(document.getElementById(data));
  }

  deleteItem(i) {
    if (i > -1) {
      this.DraggedList.splice(i, 1);
    }
  }