英文:
Drag and Drop for mobile devices
问题
这是你的翻译内容：
我有一个关于这段代码的问题，因为它在笔记本电脑和台式机上运行得很完美，但在移动设备上不起作用，请帮助我并告诉我需要添加哪些内容，以便它可以在两者上都运行。
我已经添加了触摸事件，但它没有起作用。
这是我的JavaScript代码：
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;
}
}
希望对你有所帮助！如果你需要进一步的解释或帮助，请随时提出。
英文:
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;
}
}
答案1
得分: 1
抱歉，移动设备上的拖放功能可能会有些问题。好消息是您可以使用polyfill来解决这些问题。请查看这里：https://www.npmjs.com/package/drag-drop-touch
英文:
Unfortunately Drag & Drop on mobile can be a bit sketchy.
The good news is that you can pollyfill these issues.
Have a look here -> https://www.npmjs.com/package/drag-drop-touch
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论