added preventDefault prop

Author: totalolage

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 4.4.4 (July 4, 2021)
+
+- Add `preventDefault` prop to allow touch scroll
+
 ### 4.4.3 (June 8, 2020)
 
 - Add `nodeRef` to TypeScript definitions
@@ -41,16 +45,16 @@
     `nodeRef` is also available on `<DraggableCore>`.
 - Remove "browser" field in "package.json":
   - There is nothing special in the browser build that is actually practical
-    for modern use. The "browser" field, as defined in 
+    for modern use. The "browser" field, as defined in
     https://github.com/defunctzombie/package-browser-field-spec#overview,
     indicates that you should use it if you are directly accessing globals,
     using browser-specific features, dom manipulation, etc.
-    
+
     React components like react-draggable are built to do minimal raw
     DOM manipulation, and to always gate this behind conditionals to ensure
     that server-side rendering still works. We don't make any changes
     to any of that for the "browser" build, so it's entirely redundant.
-    
+
     This should also fix the "Super expression must either be null or
     a function" error (#472) that some users have experienced with particular
     bundler configurations.
@@ -61,7 +65,7 @@
   - The browser build will likely be removed entirely in 5.0.
 - Fix: Make `bounds` optional in TypeScript [#473](https://github.com/strml/react-draggable/pull/473)
 
-### 4.3.1 (Apr 11, 2020) 
+### 4.3.1 (Apr 11, 2020)
 
 > This is a bugfix release.
 
@@ -72,7 +76,7 @@
     return React.cloneElement(this.props.children, {style: this.props.children.props.style});
     ```
     , `style` ends up undefined.
-- Fixed a bug that caused debug output to show up in the build. 
+- Fixed a bug that caused debug output to show up in the build.
   - `babel-loader` cache does not invalidate when it should. I had modified webpack.config.js in the last version but it reused stale cache.
 
 ### 4.3.0 (Apr 10, 2020)
@@ -82,7 +86,7 @@
   - Thanks @schnerd, [#450](https://github.com/mzabriskie/react-draggable/pull/450)
 - Fix an issue where the insides of a `<Draggable>` were not scrollable on touch devices due to the outer container having `touch-action: none`.
     - This was a long-standing hack for mobile devices. Without it, the page will scroll while you drag the element.
-    - The new solution will simply cancel the touch event `e.preventDefault()`. However, due to changes in Chrome >= 56, this is only possible on 
+    - The new solution will simply cancel the touch event `e.preventDefault()`. However, due to changes in Chrome >= 56, this is only possible on
       non-passive event handlers. To fix this, we now add/remove the touchEvent on lifecycle events rather than using React's event system.
     - [#465](https://github.com/mzabriskie/react-draggable/pull/465)
 - Upgrade devDeps and fix security warnings. None of them actually applied to this module.
@@ -106,7 +110,7 @@
   * **`"module"`**: ES6-compatible build using import/export.
 
   This should fix issues like https://github.com/STRML/react-resizable/issues/113 while allowing modern bundlers to consume esm modules in the future.
-  
+
   No compatibility changes are expected.
 
 ### 4.0.3 (Sep 10, 2019)

README.md

@@ -264,7 +264,12 @@ positionOffset: {x: number | string, y: number | string},
 // Specifies the scale of the canvas your are dragging this element on. This allows
 // you to, for example, get the correct drag deltas while you are zoomed in or out via
 // a transform or matrix in the parent of this element.
-scale: number
+scale: number,
+
+// If set to false, the input event will not be default-prevented.
+// You should call `.preventDefault() `within the `onStart`, `onDrag`, and `onEnd` event handlers.
+// This allows for touch scrolling to work when the event originates on a draggable element.
+preventDefault: boolean
 }
 ```
 
@@ -321,7 +326,8 @@ on itself and thus must have callbacks attached to be useful.
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
-  scale: number
+  scale: number,
+  preventDefault: boolean
 }
 ```
 

example/example.js

@@ -150,6 +150,11 @@ class App extends React.Component {
                 Both parent padding and child margin work properly.
               </div>
             </Draggable>
+            <Draggable bounds="parent" {...dragHandlers} preventDefault={false}>
+              <div className="box">
+                I don't prevent touches from scrolling the container.
+              </div>
+            </Draggable>
           </div>
         </div>
         <Draggable bounds="body" {...dragHandlers}>

lib/DraggableCore.js

@@ -55,6 +55,7 @@ export type DraggableCoreDefaultProps = {
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
+  preventDefault: true,
   scale: number,
 };
 
@@ -65,6 +66,7 @@ export type DraggableCoreProps = {
   offsetParent: HTMLElement,
   grid: [number, number],
   handle: string,
+  preventDefault: boolean,
   nodeRef?: ?React.ElementRef<any>,
 };
 
@@ -208,6 +210,8 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      */
     scale: PropTypes.number,
 
+    preventDefault: PropTypes.bool,
+
     /**
      * These properties should be defined on the child, not here.
      */
@@ -224,6 +228,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     onDrag: function(){},
     onStop: function(){},
     onMouseDown: function(){},
+    preventDefault: true,
     scale: 1,
   };
 
@@ -292,7 +297,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     // Prevent scrolling on mobile devices, like ipad/iphone.
     // Important that this is after handle/cancel.
-    if (e.type === 'touchstart') e.preventDefault();
+    if (this.props.preventDefault && e.type === 'touchstart') e.preventDefault();
 
     // Set touch identifier in component state if this is a touch event. This allows us to
     // distinguish between individual touches on multitouch screens by identifying which

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-draggable",
-  "version": "4.4.3",
+  "version": "4.4.4",
   "description": "React draggable component",
   "main": "build/cjs/cjs.js",
   "unpkg": "build/web/react-draggable.min.js",