fix: add allowMobileScroll prop to allow for clicks to optionally pass through on mobile

README.md

@@ -327,6 +327,7 @@ on itself and thus must have callbacks attached to be useful.
   cancel: string,
   disabled: boolean,
   enableUserSelectHack: boolean,
+  allowMobileScroll: boolean,
   offsetParent: HTMLElement,
   grid: [number, number],
   handle: string,

lib/DraggableCore.js

@@ -288,7 +288,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
 
     // Prevent scrolling on mobile devices, like ipad/iphone.
     // Important that this is after handle/cancel.
-    if (e.type === 'touchstart') e.preventDefault();
+    if (e.type === 'touchstart' && !this.props.allowMobileScroll) 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

typings/index.d.ts

@@ -46,6 +46,7 @@ declare module 'react-draggable' {
     children?: React.ReactNode,
     disabled: boolean,
     enableUserSelectHack: boolean,
+    allowMobileScroll: boolean,
     offsetParent: HTMLElement,
     grid: [number, number],
     handle: string,

typings/test.tsx

@@ -24,6 +24,7 @@ ReactDOM.render(
     onMouseDown={handleMouseDown}
     disabled={true}
     enableUserSelectHack={false}
+    allowMobileScroll={false}
     bounds={false}
     defaultClassName={'draggable'}
     defaultClassNameDragging={'dragging'}
@@ -54,7 +55,8 @@ ReactDOM.render(
     onDrag={handleDrag}
     onStop={handleStop}
     offsetParent={document.body}
-    enableUserSelectHack={false}>
+    enableUserSelectHack={false}
+    allowMobileScroll={false}>
     <div className="foo bar" ref={nodeRefCore}>
       <div className="handle"/>
       <div className="cancel"/>