Мне удалось добавить события перетаскивания к набору изображений. Я хочу создать таймер для отображения на веб-странице. Этот таймер предназначен для отображения количества времени, которое требуется пользователю, чтобы перетащить любое количество изображений в зону 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 = ''
}
})