81drum
@81drum
in php we trust

Как отключить срабатывание dragover при перетаскивании выделенного текста?

Есть 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();
        });
    });
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы