web-dev-qa-db-ja.com

angular 2 onDropイベントからファイルを取得する方法は？

私はこれを試してみましたが、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>

これに対する解決策はありますか？

javascriptangulardrag-and-dropimage-upload
11
Vladimir

イベントonDropイベントは、onDragOverがpreventDefault()およびstopPropagation()メソッドをイベントで実行した場合にのみ発生します。

[〜＃〜] 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-有効なドロップゾーンの定義 を参照してください

14
maryl

ここに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;
}

スナップショット：

Drag 1

Drag 2

3
Shubham Verma

OnDrop機能を再利用可能なディレクティブにラップできます。このような：

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

このディレクティブを要素に適用します。

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

イベントは、ドロップされたファイルのJavaScript配列で発生します。したがって、コンポーネントのonDrop実装は次のようになります。

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

他の人が述べたように、_(dragover)_イベントでevent.preventDefault()およびevent.stopPropagation()を呼び出して、コンテナを有効なドロップゾーンにする必要があります。

私は高度にカスタマイズ可能なAngularコンポーネントを作成しました。これは正しいドラッグアンドドロップ動作を実装するため、何度もコピーする必要がなく、ドロップされたファイルのリストを次のように返します。出力イベント。
これは 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>
_
1
Peter Freeman

Hostlistenerデコレータをドラッグイベントに使用してみてください。たとえば、それが実装されていることがわかります ここではng2-file-upload

0
Vojtech