Подскажите почему не добавляется класс к моей форме?
При перетаскивании файла с ПК на id="drop-zona" к ней должен добавится класс is-dragover, как только файл попадает в эту зону.
По логике addEventListener у меня обрабатывает несколько событий и при любом из них должен добавить класс..
события
- dragover — Событие происхоит, когда элемент перетаскивается сверху (over) цели перетаскивание.
- dragenter — Событие происхоит, когда перетаскиваемый элемент попадает в цель перетаскивания (drop target).
Я видел подобные решения на jQuery но я делаю это на JS...
Я пытался решить это сам, но не смог.. 2 дня в трубу, прошу помощи.
HTML
<div class="wrapper-form">
<div id="drop-zona"></div>
<form enctype="multipart/form-data" id="main-form">
<div class="form-em">
<div class="form-group">
<input type="text" name="name" class="fg-mr" placeholder="Your name">
</div>
<div class="form-group">
<div class="fg-btn">
<input type="email" name="email" placeholder="Your email">
</div>
</div>
<textarea name="text" rows="5" placeholder="your message..."></textarea>
<div class="form-group">
</div>
<div class="form-group">
<input class="fg-mr fg-clear" id="clear-form" type="reset" value="Clear form">
<div class="fg-mr fg-wrap">
<input class="fg-mr fg-upload-none" type="file" name="myfile[]" id="myfile" accept=".jpg, .jpeg, .png" data-multiple-caption="{count} files selected" multiple />
<label id="upload-container" class="fg-upload" for="myfile">Load file<span class="fg-upload-drag"> or drag it here</span></label>
</div>
<button id="send-btn-form" class="fg-send button-f" type="submit" value="Send">Send message</button>
</div>
</div>
</form>
</div>
JS
let dropZona = document.getElementById("drop-zona");
dropZona.addEventListener("dragenter dragleave dragover drop", e => {
e.preventDefault();
e.stopPropagation();
});
dropZona.addEventListener("dragover dragenter", function() {
dropZona.classList.add("is-dragover");
});
dropZona.addEventListener("dragleave drop", function() {
dropZona.classList.remove("is-dragover");
});
dropZona.addEventListener("drop", e => {
e.dataTransfer.files;
});
addEventListener()
должна быть строка с именем ОДНОГО события, строки вроде"dragenter dragleave dragover drop"
воспринимаются не как список или порядок событий, но как длинное имя одного странного несуществующего события.