Delete option for the dropped list item

Question

I have used the following HTML and Javascript for drag and drop list items from one div to another 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>

And Typescript contains the following:

  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));
  }

The stackblitz link was, https://stackblitz.com/edit/angular-wyimor

The thing i am in the need was after i have dropped the list item into the div with class buildArea, the list item can be deleted that is i am in the need to generate unique delete button for each dropped item and on click that button that current list has to be deleted.

The option for deleting the dropped list item in the green area from the given Demo needs to be done. I am also required to use only pure javascript and jquery needs to be ignored.

After a long search i couldn't find out any solution regarding it and hence kindly help me to achieve the desire output of deleting the dropped list items.

Akj Akj · Accepted Answer · 2018-08-16T05:41:05

Try something like this:

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);
    }
  }

Delete option for the dropped list item

1 Answers