<テンプレート>
<div class="page-draggle">
<div
:class="[borderhover ? 'draggle-area-active' : '', 'draggle-area']"
id="ドラッグエリア"
>
<div v-for="(item, index) in fileName" :key="index">
<div class="content_div">{ {アイテム}}</div>
</div>
<div class="draggle-text">ドラッグ アンド ドロップで直接インポート</div>
</div>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前： ""、
データ（） {
戻る {
ボーダーホバー: false,
ファイル名： []
};
}、
コンポーネント: {}、
メソッド: {
りゅう） {
this.borderhover = true;
this.preventDefault(e);
}、
ドラッグリーブ(e) {
this.borderhover = false;
this.preventDefault(e);
}、
ドラグオーバー(e) {
this.borderhover = true;
this.preventDefault(e);
}、
enentDrop(e) {
this.borderhover = false;
this.preventDefault(e);
let fileData = e.dataTransfer.files;
this.uploadFile(fileData);
}、
preventDefault(e) {
e.stopPropagation();
e.preventDefault(); //必須フィールド
}、
uploadFile(ファイル) {
let data = new FormData();
datas.append("ファイル", ファイル);
let data = new FormData();
datas.append("ファイル", ファイル);
for (let index = 0; index < file.length; index++) {
const要素=ファイル[インデックス];
this.fileName.push(要素['名前'])
}
}
}、
作成した（） {}、
マウントされた() {
// 1. ファイルが初めてドラッグ ゾーンに入ると、dragenter イベントがトリガーされます
// 2. ファイルがドラッグ領域で前後にドラッグされると、dragover イベントが継続的にトリガーされます
// 3. ファイルが既にドラッグ ゾーンにあり、マウスが離されると、ドロップ イベントがトリガーされます
// 4. ファイルがドラッグ領域で前後にドラッグされると、dragleave イベントが継続的にトリガーされます
var dropbox = document.getElementById("draggle-area");
console.log("22222", ドロップボックス);
dropbox.addEventListener("ドロップ", this.enentDrop, false);
dropbox.addEventListener("dragleave", this.dragleave, false);
dropbox.addEventListener("dragenter", this.dragenter, false);
dropbox.addEventListener("dragover", this.dragover, false);
}、
計算: {}
};
</script>
<スタイルスコープ>
.ページドラッグ {
表示: フレックス;
フレックスラップ: ラップ;
正当化コンテンツ: flex-start;
}
#ドラッグエリア{
表示: フレックス;
フレックスラップ: ラップ;
正当化コンテンツ: flex-start;
幅: 100%;
高さ: 200px;
境界線: 1 ピクセルの黒一色。
}
.content_div {
左マージン: 20px;
幅: 200px;
高さ: 30px;
}
</style>