I have a problem with this code because it work perfectly on laptops and desktop devices but not on mobile devices , please help me and tell me what are the things to add so it will work for both. I added the touch events but it didn't work This is the my Js code :
const draggableElements = document.querySelectorAll(".draggable");
const droppableElements = document.querySelectorAll(".droppable");
draggableElements.forEach(elem => {
elem.addEventListener("dragstart", dragStart);
elem.addEventListener("touchstart", dragStart);
});
droppableElements.forEach(elem => {
elem.addEventListener("dragenter", dragEnter);
elem.addEventListener("dragover", dragOver );
elem.addEventListener("dragleave", dragLeave);
elem.addEventListener("drop", drop);
elem.addEventListener("touchstart", dragEnter);
elem.addEventListener("touchmove", dragOver );
elem.addEventListener("touchend", drop);
elem.addEventListener("touchcancel", dragLeave);
});
function dragStart(event) {
event.dataTransfer.setData('text/plain', event.target.id);
setTimeout(() => {
event.target.classList.add('hide');
}, 0);
}
function dragEnter(event) {
event.preventDefault();
event.target.classList.add('droppable-hover');
}
function dragOver(event) {
event.preventDefault();
event.target.classList.add('droppable-hover');
}
function dragLeave(event) {
event.target.classList.remove('droppable-hover');
}
function drop(event) {
event.preventDefault();
var id = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(id);
var container = event.target.closest(".droppable");
if (container && draggedElement) {
var existingImage = container.querySelector("img");
if (existingImage) {
const draggableContainer = document.querySelector(".draggable");
container.removeChild(existingImage);
draggableContainer.appendChild(existingImage);
container.appendChild(draggedElement);
}
existingImage = draggedElement;
}
}
