Better handling of touch-action css property

marcojakob · May 5, 2018 · a9f1be2 · a9f1be2
1 parent 3f24e70
commit a9f1be2
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 40 deletions.
diff --git a/example/custom_acceptor/example.css b/example/custom_acceptor/example.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -61,16 +62,16 @@ body {
 }
 
 .dnd-over {
-  background-color: #ff5722;
+  background-color: #ffe607;
 }
 
 .dnd-invalid {
   background-color: grey;
   cursor: not-allowed;
 }
 
-.dnd-dragging, .dnd-drag-occurring {
+.dnd-dragging,
+.dnd-drag-occurring {
   cursor: url(packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
   cursor: url(packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
 }
-
diff --git a/example/nested_dropzones/example.css b/example/nested_dropzones/example.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -52,7 +53,8 @@ body {
   background-color: #ffe082;
 }
 
-.dnd-draggable, .dnd-drag-occurring {
+.dnd-draggable,
+.dnd-drag-occurring {
   cursor: url(packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
   cursor: url(packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
 }
@@ -62,5 +64,5 @@ body {
 }
 
 .dnd-over {
-  background-color: #ff5722;
-}
+  background-color: #ffe607;
+}
diff --git a/example/nested_elements/example.css b/example/nested_elements/example.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -46,7 +47,7 @@ body {
 
 .inner {
   padding: 10px;
-  margin-top:10px;
+  margin-top: 10px;
   height: 20px;
   border-radius: 8px;
   background-color: #ffe082;
@@ -65,7 +66,8 @@ button {
   height: 30px;
 }
 
-.dnd-draggable, .dnd-drag-occurring {
+.dnd-draggable,
+.dnd-drag-occurring {
   cursor: url(packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
   cursor: url(packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
 }
@@ -75,5 +77,5 @@ button {
 }
 
 .dnd-over {
-  background-color: #ff5722;
-}
+  background-color: #ffe607;
+}
diff --git a/example/simple_sortable/example.css b/example/simple_sortable/example.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -38,14 +39,15 @@ body {
   opacity: 0.5;
 }
 
-.dnd-dragging, .dnd-drag-occurring {
+.dnd-dragging,
+.dnd-drag-occurring {
   cursor: url(packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
   cursor: url(packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
 }
 
 .dnd-over {
   border-width: medium;
-  border-color: #ff5722;
+  border-color: #cddc39;
   border-style: dashed;
   background-color: white;
   opacity: 1;
@@ -54,4 +56,3 @@ body {
 .dnd-over * {
   display: none;
 }
-
diff --git a/lib/src/draggable.dart b/lib/src/draggable.dart
@@ -296,11 +296,16 @@ class Draggable {
     });
   }
 
-  /// Unistalls all listeners.
+  /// Resets the draggable elements to their initial state.
+  ///
+  /// All listeners are uninstalled.
   void destroy() {
     _resetCurrentDrag();
 
-    // Destroy all managers.
+    // Reset the touch action property.
+    _elementOrElementList.style.touchAction = null;
+
+    // Destroy all managers with their listeners.
     _eventManagers.forEach((m) => m.destroy());
     _eventManagers.clear();
     if (avatarHandler != null && avatarHandler.avatar != null) {

diff --git a/lib/src/draggable_manager.dart b/lib/src/draggable_manager.dart
@@ -22,6 +22,19 @@ abstract class _EventManager {
   _EventManager(this.drg) {
     // Install the start listeners when constructed.
     installStart();
+
+    // Disable touch actions (scrolling, panning, zooming) depending on
+    // horizontalOnly / verticalOnly options.
+    if (drg.horizontalOnly) {
+      // Only allow vertical scrolling, panning.
+      drg._elementOrElementList.style.touchAction = 'pan-y';
+    } else if (drg.verticalOnly) {
+      // Only allow horizontal scrolling, panning.
+      drg._elementOrElementList.style.touchAction = 'pan-x';
+    } else {
+      // No scrolling, panning.
+      drg._elementOrElementList.style.touchAction = 'none';
+    }
   }
 
   /// Installs the start listeners (e.g. mouseDown, touchStart, etc.).
@@ -95,7 +108,6 @@ abstract class _EventManager {
     _currentDrag.position = position;
 
     EventTarget realTarget = _getRealTarget(clientPosition, target: target);
-    print('${drg.id}');
     drg._handleDragEnd(event, realTarget);
   }
 
@@ -382,10 +394,6 @@ class _PointerManager extends _EventManager {
     } else {
       _doInstallStart(drg._elementOrElementList);
     }
-
-    // Disable default touch actions on all elements (scrolling, panning, zooming).
-    drg._elementOrElementList.style
-        .setProperty('touch-action', _getTouchActionValue());
   }
 
   void _doInstallStart(Element element) {
@@ -451,16 +459,4 @@ class _PointerManager extends _EventManager {
       handleCancel(event);
     }));
   }
-
-  /// Returns the touch-action values `none`, `pan-x`, or `pan-y` depending on
-  /// horizontalOnly / verticalOnly options.
-  String _getTouchActionValue() {
-    if (drg.horizontalOnly) {
-      return 'pan-y';
-    }
-    if (drg.verticalOnly) {
-      return 'pan-x';
-    }
-    return 'none';
-  }
 }
diff --git a/test/scroll-offset/example.css b/test/scroll-offset/example.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -50,11 +51,12 @@ body {
   opacity: 0.5;
 }
 
-.dnd-dragging, .dnd-drag-occurring {
+.dnd-dragging,
+.dnd-drag-occurring {
   cursor: url(../packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */
   cursor: url(../packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */
 }
 
 .dnd-over {
-  background-color: #ff5722;
-}
+  background-color: #ffe607;
+}