feat(example): minor cleanups, add scrollable content example

Author: STRML

Makefile

@@ -38,7 +38,7 @@ test-phantom: $(BIN)
 	@NODE_ENV=test $(BIN)/karma start karma-phantomjs.conf.js
 
 dev: $(BIN) clean
-	DRAGGABLE_DEBUG=true $(BIN)/webpack-dev-server
+	$(BIN)/webpack-dev-server
 
 node_modules/.bin: install
 

example/example.js

@@ -89,6 +89,17 @@ class App extends React.Component {
             <div>You must click my handle to drag me</div>
           </div>
         </Draggable>
+        <Draggable handle="strong">
+          <div className="box no-cursor" style={{display: 'flex', flexDirection: 'column'}}>
+            <strong className="cursor"><div>Drag here</div></strong>
+            <div style={{overflow: 'scroll'}}>
+              <div style={{background: 'yellow', whiteSpace: 'pre-wrap'}}>
+                I have long scrollable content with a handle
+                {'\n' + Array(40).fill('x').join('\n')}
+              </div>
+            </div>
+          </div>
+        </Draggable>
         <Draggable cancel="strong" {...dragHandlers}>
           <div className="box">
             <strong className="no-cursor">Can't drag here</strong>
@@ -144,24 +155,24 @@ class App extends React.Component {
           <div className="box">
             My position can be changed programmatically. <br />
             I have a drag handler to sync state.
-            <p>
+            <div>
               <a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
-            </p>
-            <p>
+            </div>
+            <div>
               <a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
-            </p>
+            </div>
           </div>
         </Draggable>
         <Draggable position={controlledPosition} {...dragHandlers} onStop={this.onControlledDragStop}>
           <div className="box">
             My position can be changed programmatically. <br />
             I have a dragStop handler to sync state.
-            <p>
+            <div>
               <a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
-            </p>
-            <p>
+            </div>
+            <div>
               <a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
-            </p>
+            </div>
           </div>
         </Draggable>
 

webpack.config.js

@@ -24,6 +24,7 @@ module.exports = (env, argv) => ({
     hot: true,
     open: true,
     openPage: 'example/index.html',
+    disableHostCheck: true,
     writeToDisk: true,
   },
   devtool: 'source-map',
@@ -57,7 +58,7 @@ module.exports = (env, argv) => ({
   plugins: [
     new webpack.EnvironmentPlugin({
       // Default values
-      DRAGGABLE_DEBUG: argv.mode === 'development',
+      DRAGGABLE_DEBUG: (process.env.DRAGGABLE_DEBUG || ''),
       NODE_ENV: ['development', 'production'].includes(argv.mode) ? 
         argv.mode : 
         (process.env.NODE_ENV || 'production'),