我使用了以下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删除绿色区域中删除的列表项的选项 需要完成。 我还需要仅使用纯 JavaScript,并且需要忽略 jquery。
经过长时间的搜索,我找不到任何相关的解决方案,因此请帮助我实现删除删除的列表项的期望输出。
最佳答案
尝试这样的事情:
<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);
}
}
关于javascript - 删除列表项的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51870063/