Check direction of swipe

gaer87 · Apr 27, 2019 · 22056a9 · 22056a9
1 parent a13c540
commit 22056a9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/js/main.jsx b/src/js/main.jsx
@@ -62,6 +62,7 @@ export default class SwipeToDelete extends React.Component {
       this.onInteract = e => {
         el.removeEventListener(this.device.getStartEventName(), this.onInteract, false);
         this.model.startX = this.device.getPageX(e);
+        this.model.startY = this.device.getPageY(e);
         resolve();
       };
 
@@ -85,9 +86,15 @@ export default class SwipeToDelete extends React.Component {
 
   moveAt(e) {
     const target = this.regionContent.firstChild;
-    const res = this.device.getPageX(e) - this.model.startX;
+    const resX = this.device.getPageX(e) - this.model.startX;
+    const resY = this.device.getPageY(e) - this.model.startY;
 
-    target.style.left = `${res}px`;
+    if (Math.abs(resX) <= Math.abs(resY)) {
+      console.info('F');
+      return;
+    }
+
+    target.style.left = `${resX}px`;
   }
 
   callMoveCB(e) {

diff --git a/src/js/utils/device.js b/src/js/utils/device.js
@@ -7,6 +7,8 @@ export default class Device {
 class Touch extends Device {
   getPageX(e) { return e.targetTouches[0].pageX; }
 
+  getPageY(e) { return e.targetTouches[0].pageY; }
+
   getStartEventName() { return 'touchstart'; }
 
   getInteractEventName() { return 'touchmove'; }
@@ -17,6 +19,8 @@ class Touch extends Device {
 class Mouse extends Device {
   getPageX(e) { return e.pageX; }
 
+  getPageY(e) { return e.pageY; }
+
   getStartEventName() { return 'mousedown'; }
 
   getInteractEventName() { return 'mousemove'; }