Merge pull request #31 from lbratkovskaya/dnd-mobile-fix

fix: add touch events
lbratkovskaya · Mar 17, 2021 · 6572e78 · 6572e78
2 parents 80ddd93 + e0e6329
commit 6572e78
Showing 1 changed file with 26 additions and 11 deletions.
diff --git a/src/components/DraggableWrapper/DraggableWrapper.tsx b/src/components/DraggableWrapper/DraggableWrapper.tsx
@@ -18,8 +18,8 @@ const DraggableWrapper: React.FC<PropsWithChildren<DraggableWrapperProps>> = (
 
   const dragObject: DragElement = {} as DragElement;
 
-  const dragStartListener = (event: DragEvent) => {
-    if (event.button !== 0) {
+  const dragStartListener = (event: DragEvent | TouchEvent) => {
+    if ((event instanceof DragEvent) && event.button !== 0) {
       return;
     }
 
@@ -29,24 +29,35 @@ const DraggableWrapper: React.FC<PropsWithChildren<DraggableWrapperProps>> = (
 
     if (!elem) return;
 
-    const dt = event.dataTransfer;
+    const dt = (event instanceof DragEvent) && event.dataTransfer;
     if (dt) {
       dt.effectAllowed = 'move';
     }
 
     dragObject.elem = elem as HTMLElement;
 
-    dragObject.downX = event.pageX;
-    dragObject.downY = event.pageY;
-    dragObject.mouseOffsetLeft = event.pageX - elem.offsetLeft;
-    dragObject.mouseOffsetTop = event.pageY - elem.offsetTop;
+    dragObject.downX = (event instanceof DragEvent)
+      ? (event as DragEvent).pageX : (event as TouchEvent).touches[0].pageX;
+    dragObject.downY = (event instanceof DragEvent)
+      ? (event as DragEvent).pageY : (event as TouchEvent).touches[0].pageY;
+    dragObject.mouseOffsetLeft = dragObject.downX - elem.offsetLeft;
+    dragObject.mouseOffsetTop = dragObject.downY - elem.offsetTop;
   };
 
-  const dropListener = (event: DragEvent) => {
-    event.preventDefault();
+  const dropListener = (event: DragEvent | TouchEvent) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    if (!(event.target instanceof HTMLElement)) return;
+
+    if (!dragObject.elem.isEqualNode(event.target?.closest('.draggable') as HTMLElement)) {
+      return;
+    }
 
-    const newX = event.pageX;
-    const newY = event.pageY;
+    const newX = (event instanceof DragEvent)
+      ? (event as DragEvent).pageX : (event as TouchEvent).changedTouches[0].pageX;
+    const newY = (event instanceof DragEvent)
+      ? (event as DragEvent).pageY : (event as TouchEvent).changedTouches[0].pageY;
 
     if (!dragObject) return;
 
@@ -56,15 +67,19 @@ const DraggableWrapper: React.FC<PropsWithChildren<DraggableWrapperProps>> = (
 
   useEffect(() => {
     document.addEventListener('dragstart', dragStartListener);
+    document.addEventListener('touchstart', dragStartListener);
     document.addEventListener('dragenter', (event) => event.preventDefault());
     document.addEventListener('dragover', (event) => event.preventDefault());
     document.addEventListener('drop', dropListener);
+    document.addEventListener('touchend', dropListener);
 
     return () => {
       document.removeEventListener('dragstart', dragStartListener);
+      document.removeEventListener('touchstart', dragStartListener);
       document.removeEventListener('dragenter', (event) => event.preventDefault());
       document.removeEventListener('dragover', (event) => event.preventDefault());
       document.removeEventListener('drop', dropListener);
+      document.removeEventListener('touchend', dropListener);
     };
   }, []);