fix typo and clean codes.

t-hiroyoshi · Nov 21, 2015 · 31c207c · 31c207c
1 parent 194c654
commit 31c207c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 33 deletions.
diff --git a/examples/ExampleDnD.js b/examples/ExampleDnD.js
@@ -1,22 +1,22 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { DragDropContext }from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
+import { DragDropContext }from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 
-import { DnDItem, DropPositions } from "../src/index";
+import { DnDItem, DropPositions } from '../src/index';
 
 @DragDropContext(HTML5Backend)
 class ExampleDnD extends Component {
   constructor(props) {
     super(props);
     this.state = {
       somethings: [
-        {id: "1", name: "somethigs1"},
-        {id: "2", name: "somethigs2"},
-        {id: "3", name: "somethigs3"},
-        {id: "4", name: "somethigs4"},
-        {id: "5", name: "somethigs5"},
-        {id: "6", name: "somethigs6"}
+        {id: '1', name: 'somethigs1'},
+        {id: '2', name: 'somethigs2'},
+        {id: '3', name: 'somethigs3'},
+        {id: '4', name: 'somethigs4'},
+        {id: '5', name: 'somethigs5'},
+        {id: '6', name: 'somethigs6'}
       ],
       message: ""
     };
@@ -37,24 +37,25 @@ class ExampleDnD extends Component {
 
     switch (position) {
     case TOP_LEFT:
-      this.setState({ message: `TOP_LEFT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `TOP_LEFT ${sourceId} dropped on ${targetId}` });
     case TOP_CENTER:
-      this.setState({ message: `TOP_CENTER ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `TOP_CENTER ${sourceId} dropped on ${targetId}` });
     case TOP_RIGHT:
-      this.setState({ message: `TOP_RIGHT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `TOP_RIGHT ${sourceId} dropped on ${targetId}` });
     case MIDDLE_LEFT:
-      this.setState({ message: `MIDDLE_LEFT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `MIDDLE_LEFT ${sourceId} dropped on ${targetId}` });
     case MIDDLE_CENTER:
-      this.setState({ message: `MIDDLE_CENTER ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `MIDDLE_CENTER ${sourceId} dropped on ${targetId}` });
     case MIDDLE_RIGHT:
-      this.setState({ message: `MIDDLE_RIGHT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `MIDDLE_RIGHT ${sourceId} dropped on ${targetId}` });
     case BOTTOM_LEFT:
-      this.setState({ message: `BOTTOM_LEFT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `BOTTOM_LEFT ${sourceId} dropped on ${targetId}` });
     case BOTTOM_CENTER:
-      this.setState({ message: `BOTTOM_CENTER ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `BOTTOM_CENTER ${sourceId} dropped on ${targetId}` });
     case BOTTOM_RIGHT:
-      this.setState({ message: `BOTTOM_RIGHT ${sourceId} dropped on ${targetId}` });
+      return this.setState({ message: `BOTTOM_RIGHT ${sourceId} dropped on ${targetId}` });
     default:
+      return false;
     }
   }
 

diff --git a/src/DnDItem.js b/src/DnDItem.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { findDOMNode } from 'react-dom';
 import { DragSource, DropTarget } from 'react-dnd';
-import DropPositions from "./DropPositions";
+import DropPositions from './DropPositions';
 import ItemTypes from './ItemTypes';
 
 const dropTarget = {
@@ -20,7 +20,7 @@ const dragSource = {
   endDrag(props, monitor) {
     const source = monitor.getItem();
     const target = monitor.getDropResult();
-    if (target.position) props.dropAction(target.position, source.id, target.id);
+    if (target) props.dropAction(target.position, source.id, target.id);
   }
 };
 
@@ -36,20 +36,40 @@ function getPosition(monitor, component) {
     BOTTOM_CENTER,
     BOTTOM_RIGHT
   } = DropPositions;
-  const target = findDOMNode(component).getBoundingClientRect();
+  const targetBoundingClientRect = findDOMNode(component).getBoundingClientRect();
   const clientOffset = monitor.getClientOffset();
-  const firstYLine = (target.bottom - target.top) / 3;
-  const secondYLine = firstXLine * 2;
-  const firstXLine = (target.right - target.left) / 3;
-  const secondXLine = firstYLine * 2;
-  const dropYPosition = clientOffset.y - target.top;
-  const dropXPosition = clientOffset.x - target.left;
-  const position = dropYPosition < firstYLine
-    ? dropXPosition < firstXLine ? TOP_LEFT : secondXLine > dropXPosition ? TOP_CENTER : TOP_RIGHT
-    : secondYLine > dropYPosition
-      ? dropXPosition < firstXLine ? MIDDLE_LEFT : secondXLine > dropXPosition ? MIDDLE_CENTER : MIDDLE_RIGHT
-      : dropXPosition < firstXLine ? BOTTOM_LEFT : secondXLine > dropXPosition ? BOTTOM_CENTER : BOTTOM_RIGHT;
-  return position;
+  const firstYLine = (targetBoundingClientRect.bottom - targetBoundingClientRect.top) / 3;
+  const secondYLine = firstYLine * 2;
+  const firstXLine = (targetBoundingClientRect.right - targetBoundingClientRect.left) / 3;
+  const secondXLine = firstXLine * 2;
+  const dropYPosition = clientOffset.y - targetBoundingClientRect.top;
+  const dropXPosition = clientOffset.x - targetBoundingClientRect.left;
+
+  if (dropYPosition < firstYLine) {
+    if (dropXPosition < firstXLine) {
+      return TOP_LEFT;
+    } else if (firstXLine < dropXPosition && dropXPosition < secondXLine) {
+      return TOP_CENTER;
+    } else if (dropXPosition > secondXLine) {
+      return TOP_RIGHT;
+    }
+  } else if (firstYLine < dropYPosition && dropYPosition < secondYLine) {
+    if (dropXPosition < firstXLine) {
+      return MIDDLE_LEFT;
+    } else if (firstXLine < dropXPosition && dropXPosition < secondXLine) {
+      return MIDDLE_CENTER;
+    } else if (dropXPosition > secondXLine) {
+      return MIDDLE_RIGHT;
+    }
+  } else {
+    if (dropXPosition < firstXLine) {
+      return BOTTOM_LEFT;
+    } else if (firstXLine < dropXPosition && dropXPosition < secondXLine) {
+      return BOTTOM_CENTER;
+    } else if (dropXPosition > secondXLine) {
+      return BOTTOM_RIGHT;
+    }
+  }
 }
 
 @DropTarget(ItemTypes.DND_ITEM, dropTarget, connect => ({ connectDropTarget: connect.dropTarget() }))