<шаблон>
<div class="страница-перетаскивание">
<дел
:class="[borderhover ? 'активная-область-перетаскивания' : '', 'область-перетаскивания']"
id="область перетаскивания"
>
<div v-for="(элемент, индекс) в имени файла" :key="индекс">
<div class="content_div">{ { элемент }}</div>
</div>
<div class="draggle-text">Перетащите для прямого импорта</div>
</div>
</div>
</шаблон>
<скрипт>
экспорт по умолчанию {
имя: "",
данные() {
возвращаться {
граница: ложь,
имя файла: []
};
},
компоненты: {},
методы: {
дракон(ы) {
this.borderhover = истина;
this.preventDefault(e);
},
брелок (е) {
this.borderhover = ложь;
this.preventDefault(e);
},
перетаскивание (е) {
this.borderhover = истина;
this.preventDefault(e);
},
enentDrop(e) {
this.borderhover = ложь;
this.preventDefault(e);
пусть fileData = e.dataTransfer.files;
этот .uploadFile (данные файла);
},
предотвратить по умолчанию (е) {
e.stopPropagation();
e.preventDefault();//обязательные поля
},
загрузитьФайл(файл) {
пусть данные = новые данные формы();
datas.append ("файл", файл);
пусть данные = новые данные формы();
datas.append ("файл", файл);
for (пусть index = 0; index < file.length; index++) {
константный элемент = файл[индекс];
this.fileName.push (элемент ['имя'])
}
}
},
созданный() {},
установлен () {
// 1. Когда файл впервые попадает в зону перетаскивания, срабатывает событие dragenter
// 2. Когда файл перетаскивается вперед и назад в области перетаскивания, постоянно запускается событие перетаскивания
// 3. Когда файл уже находится в зоне перетаскивания и мышь отпущена, срабатывает событие перетаскивания
// 4. Когда файл перетаскивается вперед и назад в области перетаскивания, постоянно запускается событие dragleave
var dropbox = document.getElementById("область перетаскивания");
console.log("22222", dropbox);
dropbox.addEventListener("drop", this.enentDrop, false);
dropbox.addEventListener("dragleave", this.dragleave, false);
dropbox.addEventListener("dragenter", this.dragenter, false);
dropbox.addEventListener("dragover", this.dragover, false);
},
вычислено: {}
};
</скрипт>
<стиль ограничен>
.page-перетаскивание {
дисплей: гибкий;
flex-wrap: обернуть;
выравнивание содержимого: flex-start;
}
# область перетаскивания {
дисплей: гибкий;
flex-wrap: обернуть;
выравнивание содержимого: flex-start;
ширина: 100%;
высота: 200 пикселей;
граница: 1px сплошной черный;
}
.content_div {
поле слева: 20px;
ширина: 200 пикселей;
высота: 30 пикселей;
}
</стиль>