Add touch backend for mobile devices

package-lock.json

@@ -23,6 +23,7 @@
         "react-csv": "^2.2.2",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-touch-backend": "^16.0.1",
         "react-dom": "^17.0.2",
         "react-is": "^17.0.2",
         "react-markdown": "^8.0.2",
@@ -11128,6 +11129,15 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "node_modules/react-dnd-touch-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
+      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -22682,6 +22692,15 @@
         "dnd-core": "^16.0.1"
       }
     },
+    "react-dnd-touch-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
+      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "dnd-core": "^16.0.1"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",

package.json

@@ -79,6 +79,7 @@
     "react-csv": "^2.2.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-markdown": "^8.0.2",

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from "react";
+import React, { useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import styled from "styled-components";
 import colors from "@theme/colors";

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { TouchBackend } from "react-dnd-touch-backend";
 import styled from "styled-components";
 import shortid from "shortid";
 import colors from "@theme/colors";
@@ -62,9 +63,20 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
 
   const questions: SignupFormQuestion[] = JSON.parse(value);
 
+  // simple way to check whether the device support touch (it doesn't check all fallback, it supports only modern browsers)
+  const isTouchDevice = () => {
+    if ("ontouchstart" in window) {
+      return true;
+    }
+    return false;
+  };
+
+  // Assigning backend based on touch support on the device
+  const backendForDND = isTouchDevice() ? TouchBackend : HTML5Backend;
+
   return (
     <Widget>
-      <DndProvider backend={HTML5Backend}>
+      <DndProvider backend={backendForDND}>
         <QuestionList
           questions={questions}
           onChange={onValueChange}