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)

example/example.js

@@ -30,8 +30,8 @@ class App extends React.Component {
   };
   onDrop = (e) => {
     this.setState({activeDrags: --this.state.activeDrags});
-    if (e.target.classList.contains("drop-target")) {
-      alert("Dropped!");
+    if (e.target.classList.contains('drop-target')) {
+      alert('Dropped!');
       e.target.classList.remove('hovered');
     }
   };
@@ -134,7 +134,7 @@ class App extends React.Component {
           <div className="box drop-target" onMouseEnter={this.onDropAreaMouseEnter} onMouseLeave={this.onDropAreaMouseLeave}>I can detect drops from the next box.</div>
         </Draggable>
         <Draggable {...dragHandlers} onStop={this.onDrop}>
-          <div className={`box ${this.state.activeDrags ? "no-pointer-events" : ""}`}>I can be dropped onto another box.</div>
+          <div className={`box ${this.state.activeDrags ? 'no-pointer-events' : ''}`}>I can be dropped onto another box.</div>
         </Draggable>
         <div className="box" style={{height: '500px', width: '500px', position: 'relative', overflow: 'auto', padding: '0'}}>
           <div style={{height: '1000px', width: '1000px', padding: '10px'}}>
@@ -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}>
@@ -174,7 +179,7 @@ class App extends React.Component {
         </Draggable>
         <Draggable defaultPosition={{x: 25, y: 25}} {...dragHandlers}>
           <div className="box">
-            {"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
+            {'I have a default position of {x: 25, y: 25}, so I\'m slightly offset.'}
           </div>
         </Draggable>
         <Draggable positionOffset={{x: '-10%', y: '-10%'}} {...dragHandlers}>
@@ -227,27 +232,27 @@ class RemWrapper extends React.Component {
       .split(',')
       .map(px => px.replace('px', ''))
       .map(px => parseInt(px, 10) / remBaseline)
-      .map(x => `${x}rem`)
-    const [x, y] = convertedValues
+      .map(x => `${x}rem`);
+    const [x, y] = convertedValues;
 
-    return `translate(${x}, ${y})`
+    return `translate(${x}, ${y})`;
   }
 
   render() {
-    const { children, remBaseline = 16, style } = this.props
-    const child = React.Children.only(children)
+    const { children, remBaseline = 16, style } = this.props;
+    const child = React.Children.only(children);
 
     const editedStyle = {
       ...child.props.style,
       ...style,
       transform: this.translateTransformToRem(style.transform, remBaseline),
-    }
+    };
 
     return React.cloneElement(child, {
        ...child.props,
        ...this.props,
        style: editedStyle
-    })
+    });
   }
 }
 

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",
+  "name": "@filkalny-thimble/react-draggable",
+  "version": "4.4.4",
   "description": "React draggable component",
   "main": "build/cjs/cjs.js",
   "unpkg": "build/web/react-draggable.min.js",