我试过这样但是onDrop
方法在我放到它时不返回图像文件...
onDragStart(event, data: any) {
event.dataTransfer.setData('data', data);
}
onDrop(event, data: any) {
let dataTransfer = event.dataTransfer.getData('data');
event.preventDefault();
}
allowDrop(event) {
event.preventDefault();
}
<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div>
<div (dragstart)="onDragStart($event, dragData)"></div>
对此有何解决方案?
仅当onDragOver在事件上运行preventDefault()
和stopPropagation()
方法时才会触发事件onDrop事件。
HTML
<div
(drop)="onDrop($event)"
(dragover)="onDragOver($event)"
>
Drop target
</div>
DropComponent.ts
export class DropComponent {
onDrop(event) {
event.preventDefault();
}
onDragOver(event) {
event.stopPropagation();
event.preventDefault();
}
}
UPDATE
这是必需的,因为默认情况下,浏览器会阻止在放入HTML元素时发生任何事情。在MDN - Defining a valid drop zone查看更多信息
以下是Angular 2/4/6中拖放的完整代码:
drag.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'drag-root',
templateUrl: './drag.component.html',
styleUrls: ['./drag.component.css']
})
export class AppComponent {
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));
}
}
drag.component.html:
<h2>Drag and Drop</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.css:
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
花絮:
您可以将onDrop功能包装到可重用的指令中。像这样:
https://gist.github.com/darrenmothersele/7afda13d858a156ce571510dd78b7624
将此指令应用于元素:
<div (appDropZone)="onDrop($event)"></div>
该事件是使用已删除文件的JavaScript数组触发的。所以,你在组件中的onDrop
实现看起来像这样:
onDrop(files: FileList) {
console.log({ files });
}
正如其他人所说,你需要在event.preventDefault()
事件上调用event.stopPropagation()
和(dragover)
,以使你的容器成为有效的dropzone。
我编写了一个高度可自定义的Angular组件,它实现了正确的Drag'n'Drop行为,因此我不需要反复复制它,它会将已删除文件的列表作为输出事件返回。 这可以找到here。
导入模块后,您可以访问该组件:
<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>
你有一些选项可以设置,它带有一个不错的默认样式(截图可以在GitHub回购中找到)。如果你愿意,你甚至可以使用你自己的div
容器和你的自定义样式和悬停效果,并把它放在dropzone中。有关详细信息,请参阅API说明。
<ngx-dropzone [customContent]="customDropzone" (filesAdded)="onFilesDropped($event)">
<ng-template #customDropzone>
<div class="custom-dropzone">
This is my custom content
</div>
</ng-template>
您可以尝试使用Hostlistener
装饰器进行拖动事件,您可以看到它实现了例如here in ng2-file-upload