Readme updated and code refactored.

Author: akashanand708

README.md

@@ -23,14 +23,21 @@ render{
                 getPositions={this.getFloatingComponentPosition}
                 dragItemId={'floating-component-id'}
                 dragId={'draggable-area-id'}
+                draggingType="horizontal"
             >
-          <div id="floating-component-id"
-            <div id="draggable-area-id">
-            Header
+            <div id="floating-component-id"
+              <div id="draggable-area-id">
+              Header
+              </div>
             </div>
-          </div>
+          </CustomDrag>
          );
 }
 
-</CustomDrag>
 ```
+
+# Props
+1. getPositions --> Methods to get positions. (Optional)
+2. dragItemId   --> Id for the draggable component. (Required)
+3. dragId       --> Id for the div inside draggable component,user can drag and drop the draggable component by clicking and dragging this area.  (Required)
+4. draggingType --> horizontal/vertical (optional), if this value is not provided, it will behave random movement.

build/index.js

@@ -7,10 +7,10 @@ class CustomDrag extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            pos1: 0,
-            pos2: 0,
-            pos3: 0,
-            pos4: 0,
+            position1: 0,
+            position2: 0,
+            position3: 0,
+            position4: 0,
             top: 0,
             left: 0,
         };
@@ -20,71 +20,68 @@ class CustomDrag extends Component {
         let { dragId, dragItemId } = this.props;
         if (dragId !== undefined && dragId !== '' && dragId !== null &&
             dragItemId !== undefined && dragItemId !== '' && dragItemId !== null) {
-            let elmnt = document.getElementById(`${dragItemId}`);
+            let element = document.getElementById(`${dragItemId}`);
             let dragIdElement = document.getElementById(`${dragId}`);
-            if (elmnt && dragIdElement) {
-                this.dragElement(elmnt, dragIdElement);
+            if (element && dragIdElement) {
+                this.dragElement(element, dragIdElement);
             }
         }
     }
-    dragElement = (elmnt, dragIdElement) => {
-        if (dragIdElement && elmnt) {
+    dragElement = (element, dragIdElement) => {
+        if (dragIdElement && element) {
             /* if present, the header is where you move the DIV from:*/
-            dragIdElement.onmousedown = (e) => this.dragMouseDown(e, elmnt);
+            dragIdElement.onmousedown = (e) => this.dragMouseDown(e, element);
         }
     }
 
-    dragMouseDown = (e, elmnt) => {
-        let { pos1, pos2, pos3, pos4 } = this.state;
+    dragMouseDown = (e, element) => {
+        let { position1, position2, position3, position4 } = this.state;
         e = e || window.event;
         e.preventDefault();
         // get the mouse cursor position at startup:
-        pos3 = e.clientX;
-        pos4 = e.clientY;
+        position3 = e.clientX;
+        position4 = 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 });
+        document.onmousemove = (e) => this.elementDrag(e, element);
+        this.setState({ position1, position2, position3, position4 });
     }
 
-    elementDrag = (e, elmnt) => {
-        let { pos1, pos2, pos3, pos4 } = this.state;
+    elementDrag = (e, element) => {
+        let { position1, position2, position3, position4 } = 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;
+        position1 = position3 - e.clientX;
+        position2 = position4 - e.clientY;
+        position3 = e.clientX;
+        position4 = 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 offsetTop = element.offsetTop;
+        let offsetLeft = element.offsetLeft;
+        offsetTop = Math.max(offsetTop,0);
+        offsetLeft = Math.max(offsetLeft,0);
+        
+        let top = (offsetTop - position2),
+            left = (offsetLeft - position1);
         let position = {};
         let { draggingType } = this.props;
         switch (draggingType) {
             case HORIZONTAL:
                 position = { top: null, left };
-                elmnt.style.left = (offsetLeft - pos1) + 'px';
+                element.style.left = (offsetLeft - position1) + 'px';
                 break;
             case VERTICAL:
                 position = { top, left: null };
-                elmnt.style.top = (offsetTop - pos2) + 'px';
+                element.style.top = (offsetTop - position2) + 'px';
                 break;
             default:
                 position = { top, left };
-                elmnt.style.top = (offsetTop - pos2) + 'px';
-                elmnt.style.left = (offsetLeft - pos1) + 'px';
+                element.style.top = (offsetTop - position2) + 'px';
+                element.style.left = (offsetLeft - position1) + 'px';
                 break;
         }
-        this.setState({ pos1, pos2, pos3, pos4, top, left });
+        this.setState({ position1, position2, position3, position4, top, left });
         this.props.getPositions(position)
     }