Есть div куда я скидываю файл который через форму уходит на проверку. Есть js котороый все это обрабатывает.
Все отлично работает при перетаскивании и скидывании файла.
Проблема в том, что когда на странице я выделяю текст и его перетаскиваю, то div с формой тоже срабатывает (отображаетя). Как мне отключить срабатывание на выделенный текст, чтобы код работал только при перетаскивание файла?
Форма:
<div id="check-modal" hidden>
<div id="check-drop-area" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
Drop file here
<div style="display: none;">
<form method="POST"
action="{{ route('check') }}"
enctype="multipart/form-data"
id="checkForm">
@csrf
<input type="file" onchange="this.form.submit();" class="custom-file-input" data-browse="Выбрать" name="file" accept=".txt" id="checkFile">
<input type="hidden" name="check" value="yes">
</form>
</div>
</div>
</div>
JS:
const modal = document.getElementById('check-drop-area');
document.body.addEventListener('dragover', (event) => {
event.preventDefault();
document.getElementById('check-modal').hidden = false;
});
document.body.addEventListener('dragleave', (event) => {
if (event.relatedTarget == null) {
document.getElementById('check-modal').hidden = true;
}
});
window.addEventListener('drop', (event) => {
event.preventDefault();
if (event.relatedTarget == null) {
document.getElementById('check-modal').hidden = true;
}
});
function dragOverHandler(event) {
event.preventDefault();
}
function dropHandler(event) {
document.getElementById('check-modal').hidden = true;
}
document.addEventListener('DOMContentLoaded', function() {
modal.addEventListener('drop', function(evt) {
if (evt.dataTransfer.files.length === 0) return;
var checkFileInput = document.querySelector('#checkFile');
checkFileInput.files = evt.dataTransfer.files;
evt.preventDefault();
var checkForm = document.querySelector('#checkForm');
checkForm.submit();
});
});
