拖放功能适用于移动设备

huangapple
go评论122阅读模式
英文:

Drag and Drop for mobile devices

问题

这是你的翻译内容：

  1. 我有一个关于这段代码的问题，因为它在笔记本电脑和台式机上运行得很完美，但在移动设备上不起作用，请帮助我并告诉我需要添加哪些内容，以便它可以在两者上都运行。
  2. 我已经添加了触摸事件，但它没有起作用。
  3. 这是我的JavaScript代码：
  5. const draggableElements = document.querySelectorAll(".draggable");
  6. const droppableElements = document.querySelectorAll(".droppable");
  8. draggableElements.forEach(elem => {
  9.   elem.addEventListener("dragstart", dragStart);
  10.   elem.addEventListener("touchstart", dragStart);
  11. });
  13. droppableElements.forEach(elem => {
  14.   elem.addEventListener("dragenter", dragEnter);
  15.   elem.addEventListener("dragover", dragOver);
  16.   elem.addEventListener("dragleave", dragLeave);
  17.   elem.addEventListener("drop", drop);
  18.   elem.addEventListener("touchstart", dragEnter);
  19.   elem.addEventListener("touchmove", dragOver);
  20.   elem.addEventListener("touchend", drop);
  21.   elem.addEventListener("touchcancel", dragLeave);
  22. });
  24. function dragStart(event) {
  25.   event.dataTransfer.setData('text/plain', event.target.id);
  26.   setTimeout(() => {
  27.     event.target.classList.add('hide');
  28.   }, 0);
  29. }
  31. function dragEnter(event) {
  32.   event.preventDefault();
  33.   event.target.classList.add('droppable-hover');
  34. }
  36. function dragOver(event) {
  37.   event.preventDefault();
  38.   event.target.classList.add('droppable-hover');
  39. }
  41. function dragLeave(event) {
  42.   event.target.classList.remove('droppable-hover');
  43. }
  45. function drop(event) {
  46.   event.preventDefault();
  47.   var id = event.dataTransfer.getData("text/plain");
  48.   var draggedElement = document.getElementById(id);
  49.   var container = event.target.closest(".droppable");
  50.   if (container && draggedElement) {
  51.     var existingImage = container.querySelector("img");
  52.     if (existingImage) {
  53.       const draggableContainer = document.querySelector(".draggable");
  54.       container.removeChild(existingImage);
  55.       draggableContainer.appendChild(existingImage);
  56.       container.appendChild(draggedElement);
  57.     }
  58.     existingImage = draggedElement;
  59.   }
  60. }

希望对你有所帮助！如果你需要进一步的解释或帮助，请随时提出。

英文:

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 :

  1. const draggableElements = document.querySelectorAll(".draggable");
  2. const droppableElements = document.querySelectorAll(".droppable");
  5. draggableElements.forEach(elem => {
  6.   elem.addEventListener("dragstart", dragStart);
  7.   elem.addEventListener("touchstart", dragStart);
  8. });
  10. droppableElements.forEach(elem => {
  11.   elem.addEventListener("dragenter", dragEnter); 
  12.   elem.addEventListener("dragover", dragOver ); 
  13.   elem.addEventListener("dragleave", dragLeave);
  14.   elem.addEventListener("drop", drop);
  15.   elem.addEventListener("touchstart", dragEnter); 
  16.   elem.addEventListener("touchmove", dragOver ); 
  17.   elem.addEventListener("touchend", drop);
  18.   elem.addEventListener("touchcancel", dragLeave);
  19. });
  21. function dragStart(event) {
  22.   event.dataTransfer.setData('text/plain', event.target.id);
  23.   setTimeout(() => {
  24.       event.target.classList.add('hide');
  25.   }, 0);
  26. }
  29. function dragEnter(event) {
  30.   event.preventDefault();
  31.   event.target.classList.add('droppable-hover');
  32. }
  34. function dragOver(event) {
  35.   event.preventDefault();
  36.   event.target.classList.add('droppable-hover');
  37. }
  39. function dragLeave(event) {
  40.   event.target.classList.remove('droppable-hover');
  41. }
  44. function drop(event) {
  45.   event.preventDefault();
  46.   var id = event.dataTransfer.getData("text/plain");
  47.   var draggedElement = document.getElementById(id);
  48.   var container = event.target.closest(".droppable");
  49.   if (container && draggedElement) {
  50.     var existingImage = container.querySelector("img");
  51.     if (existingImage) {
  52.       const draggableContainer = document.querySelector(".draggable");
  53.       container.removeChild(existingImage);
  54.       draggableContainer.appendChild(existingImage);
  55.       container.appendChild(draggedElement);
  56.     }
  57.     existingImage = draggedElement;
  58.   }
  59. }

答案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

huangapple
  • 本文由 发表于 2023年3月7日 00:42:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75653513.html
  • drag-and-drop
  • html
  • javascript
  • mobile-devices
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定