我正在尝试让原生 HTML 5 拖放操作在我的 Angular 应用程序中运行。我得到了拖动,触发了拖动和 dragOver 事件,但不幸的是,下降没有触发任何东西。下面是 HTML 和拖动事件代码。
<ul *ngFor="let channel of channelList" >
<li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head"
style="float:left; margin:0.5px" draggable="true" (dragstart)="drag(channel)">
<ng-container *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}" width="100" height="100">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}"
width="100" height="100" >
</ng-template>
</li>
</ul>
<ul class="list-group" *ngFor="let channels of currentPickSelection" dropzone="copy">
<li class="list-group-item" style="float:Left; margin-left:0.5px" (dragover)="dragOver(channels[0])" (dragend)="drop(event)">
<ng-container *ngIf="channels[0].compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
<img class="img-rounded" src="{{ channels[0].compChannel.compChannelLogo }}" alt="{{ channels[0].compChannel.compChannelName }}"
width="70" height="70">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
</ng-template>
<br>
<strong>
<font size="2">{{ channels[0].pickCode }}</font>
</strong>
</li>
</ul>
drag(channel) {
console.log(channel);
}
dragOver(channel) {
this.draggedChannel = channel;
// console.log(this.draggedChannel);
}
drop(e) {
console.log(e);
}
最佳答案
我在 Angular 2/4/5/6 中没有任何其他模块就完成了它,您也可以使用以下代码来完成它:
drag.component.html:
<h2>Drag and Drop demo</h2>
<div id="div1"
(drop)="drop($event)"
(dragover)="allowDrop($event)">
<img
src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350"
draggable="true"
(dragstart)="drag($event)"
id="drag1"
width="88"
height="31">
</div>
<div id="div2"
(drop)="drop($event)"
(dragover)="allowDrop($event)">
</div>
drag.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'drag-root',
templateUrl: './drag.component.html',
styleUrls: ['./drag.component.css']
})
export class AppComponent {
drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
allowDrop(ev) {
ev.preventDefault();
}
drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
}
拖.component.css:
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
关于使用 Angular 4 进行 HTML 5 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47975237/