как мне добавить таймер, который запускается в событии перетаскивания и заканчивается в событии перетаскивания? - PullRequest
0 голосов
/ 16 июня 2020

Мне удалось добавить события перетаскивания к набору изображений. Я хочу создать таймер для отображения на веб-странице. Этот таймер предназначен для отображения количества времени, которое требуется пользователю, чтобы перетащить любое количество изображений в зону droptarget, а затем нажать кнопку отправки. Я предполагаю, что мне нужно создать функцию для setInterval в моей функции dragstart, а затем остановить ее в прослушивателе событий и щелкнуть. Это означает, что таймер также должен работать во время событий dragover и drapstop. Я новичок в javascript, и у меня не было возможности осмыслить это. Любая помощь будет оценена. Мой js файл:

function dragstart() {
        document.addEventListener("dragstart", function(e){
        if (e.target.className === "ing-img"){
            e.dataTransfer.setData("ingredient", e.target.src)
            e.dataTransfer.setData("id", e.target.dataset.id)
        }
    })}

    dragstart();

    function dragover() {
        document.addEventListener("dragover", function(e){
        if (e.target.className === "ing-container"){
            e.preventDefault();
        }
    })}

    dragover();

    function drop() {document.addEventListener("drop", function(e){
        if (e.target.className === "ing-container"){
            e.preventDefault();
                let imageSrc = e.dataTransfer.getData("ingredient")
                let imageId = e.dataTransfer.getData("id")
                const imgAdded = document.createElement('img')
                imgAdded.className = "ing-img"
                imgAdded.src = imageSrc
                ingContainer.append(imgAdded)
                addToArray(imageId)
        }
    })}

    drop();

document.addEventListener('click', function(e){
       if (e.target.id === "submit-button") {
           console.log(recipeCompare)
           compareSubmission()
       } else if (e.target.id === "empty-button") {
           recipeGuess = []
           ingContainer.innerHTML = ''
       }
    })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...