First commit

Author: akashanand708

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": ["react", "es2015"],
+    "plugins": [
+      "transform-object-rest-spread",
+      "transform-react-jsx"
+    ]
+  }

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/package-lock.json

.nvmrc

@@ -0,0 +1 @@
+v6.10

build/index.js

@@ -0,0 +1,35 @@
+{
+  "name": "react-drag-element",
+  "version": "0.0.1",
+  "description": "Put a description here",
+  "main": "build/index.js",
+  "peerDependencies": {
+    "react": "16.6.1"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react": "16.6.1",
+    "webpack": "4.25.1"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack --watch",
+    "build": "webpack"
+  },
+  "author": {
+    "name": "Akash Anand",
+    "email": "[email protected]"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-react": "^6.24.1",
+    "webpack-cli": "^3.1.2"
+  }
+}

package.json

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical';
+class CustomDrag extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            pos1: 0,
+            pos2: 0,
+            pos3: 0,
+            pos4: 0,
+            top: 0,
+            left: 0,
+        };
+
+    }
+    componentDidMount() {
+        let { dragId, dragItemId } = this.props;
+        if (dragId !== undefined && dragId !== '' && dragId !== null &&
+            dragItemId !== undefined && dragItemId !== '' && dragItemId !== null) {
+            let elmnt = document.getElementById(`${dragItemId}`);
+            let dragIdElement = document.getElementById(`${dragId}`);
+            if (elmnt && dragIdElement) {
+                this.dragElement(elmnt, dragIdElement);
+            }
+        }
+    }
+    dragElement = (elmnt, dragIdElement) => {
+        if (dragIdElement && elmnt) {
+            /* if present, the header is where you move the DIV from:*/
+            dragIdElement.onmousedown = (e) => this.dragMouseDown(e, elmnt);
+        }
+    }
+
+    dragMouseDown = (e, elmnt) => {
+        let { pos1, pos2, pos3, pos4 } = this.state;
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = this.closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = (e) => this.elementDrag(e, elmnt);
+        this.setState({ pos1, pos2, pos3, pos4 });
+    }
+
+    elementDrag = (e, elmnt) => {
+        let { pos1, pos2, pos3, pos4 } = this.state;
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        let offsetTop = elmnt.offsetTop;
+        let offsetLeft = elmnt.offsetLeft;
+        if (offsetTop < 0) {
+            offsetTop = 0;
+        }
+        if (offsetLeft < 0) {
+            offsetLeft = 0;
+        }
+        let top = (offsetTop - pos2),
+            left = (offsetLeft - pos1);
+        let position = {};
+        let { draggingType } = this.props;
+        switch (draggingType) {
+            case HORIZONTAL:
+                position = { top: null, left };
+                elmnt.style.left = (offsetLeft - pos1) + 'px';
+                break;
+            case VERTICAL:
+                position = { top, left: null };
+                elmnt.style.top = (offsetTop - pos2) + 'px';
+                break;
+            default:
+                position = { top, left };
+                elmnt.style.top = (offsetTop - pos2) + 'px';
+                elmnt.style.left = (offsetLeft - pos1) + 'px';
+                break;
+        }
+        this.setState({ pos1, pos2, pos3, pos4, top, left });
+        this.props.getPositions(position)
+    }
+
+    closeDragElement = () => {
+        /* stop moving when mouse button is released:*/
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+
+    render() {
+        return (
+            <div id="custom-drag-id">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+CustomDrag.defaultProps = {
+    draggingType: 'RANDOM',
+    getPositions: () => { }
+};
+CustomDrag.propTypes = {
+    draggingType: PropTypes.string,
+    getPositions: PropTypes.func,
+    dragId: PropTypes.string.isRequired,
+    dragItemId: PropTypes.string.isRequired
+};
+
+export default CustomDrag;

src/index.js

@@ -0,0 +1,28 @@
+var path = require('path');
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['react', 'es2015'],
+            plugins: ['transform-class-properties']
+          }
+        }
+      }
+    ]
+  },
+  externals: {
+    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+  }
+};