Question

我尝试过这样做但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>

对此有何解决方案？

Answer 1

仅当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();
    }
}

<强>更新

这是必需的，因为默认情况下，浏览器会阻止在放入HTML元素时发生任何事情。更多信息请访问 MDN - Defining a valid drop zone

Answer 2

以下是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;
}

快照：

Answer 3

您可以将onDrop功能包装到可重用的指令中。像这样：

https://gist.github.com/darrenmothersele/7afda13d858a156ce571510dd78b7624

将此指令应用于元素：

<div (appDropZone)="onDrop($event)"></div>

该事件由放置的文件的JavaScript数组触发。因此，您在组件中的onDrop实现看起来像这样：

onDrop(files: FileList) {
  console.log({ files });
}

Answer 4

如其他人所述，您需要在event.preventDefault()事件上调用event.stopPropagation()和(dragover)，以使您的容器成为有效的放置区。

我已经编写了一个高度可定制的Angular组件，该组件实现了正确的Drag'n'Drop行为，因此我不需要一遍又一遍地复制它，它会返回已删除文件的列表作为输出事件。
可以找到here。

导入模块后，您可以访问该组件：

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

您可以设置一些选项，它带有不错的默认样式（屏幕快照可以在GitHub存储库中找到）。如果需要，您甚至可以将自己的div容器与您的自定义样式和悬停效果一起放入放置区。有关详细信息，请参见API说明。

<ngx-dropzone [customContent]="customDropzone" (filesAdded)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>

Answer 5

您可以尝试使用Hostlistener装饰器来执行拖动事件，您可以看到它已经实现，例如here in ng2-file-upload

如何从angular 2 onDrop事件中获取文件？

5 个答案: