Improved docs (consistent naming, improved performance)

react-dnd · Sep 23, 2015 · ee1a23d · ee1a23d
1 parent 2bdcbfc
commit ee1a23d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/examples/04 Sortable/Simple/Card.js b/examples/04 Sortable/Simple/Card.js
@@ -21,40 +21,45 @@ const cardSource = {
 
 const cardTarget = {
   hover(props, monitor, component) {
-    const ownId = props.id;
-    const draggedId = monitor.getItem().id;
-    if (draggedId === ownId) {
+    const dragIndex = monitor.getItem().index;
+    const hoverIndex = props.index;
+
+    // Don't replace items with themselves
+    if (dragIndex === hoverIndex) {
       return;
     }
-
-    const ownIndex = props.index;
-    const draggedIndex = monitor.getItem().index;
 
-    // What is my rectangle on screen?
-    const boundingRect = React.findDOMNode(component).getBoundingClientRect();
-    // Where is the mouse right now?
+    // Determine rectangle on screen
+    const hoverBoundingRect = React.findDOMNode(component).getBoundingClientRect();
+
+    // Get vertical middle
+    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+    // Determine mouse position
     const clientOffset = monitor.getClientOffset();
-    // Where is my vertical middle?
-    const ownMiddleY = (boundingRect.bottom - boundingRect.top) / 2;
-    // How many pixels to the top?
-    const offsetY = clientOffset.y - boundingRect.top;
-
-    // We only want to move when the mouse has crossed half of the item's height.
-    // If we're dragging down, we want to move only if we're below 50%.
-    // If we're dragging up, we want to move only if we're above 50%.
-
-    // Moving down: exit if we're in upper half
-    if (draggedIndex < ownIndex && offsetY < ownMiddleY) {
+
+    // Get pixels to the top
+    const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+    // Only perform the move when the mouse has crossed half of the items height
+    // When dragging downwards, only move when the cursor is below 50%
+    // When dragging upwards, only move when the cursor is above 50%
+
+    // Dragging downwards
+    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
       return;
     }
 
-    // Moving up: exit if we're in lower half
-    if (draggedIndex > ownIndex && offsetY > ownMiddleY) {
+    // Dragging upwards
+    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
       return;
     }
-
-    // Time to actually perform the action!
-    props.moveCard(draggedId, ownId);
+
+    // Time to actually perform the action
+    props.moveCard(dragIndex, hoverIndex);
+
+    // Update the monitors item with the new index
+    monitor.getItem().index = hoverIndex;
   }
 };
 

diff --git a/examples/04 Sortable/Simple/Container.js b/examples/04 Sortable/Simple/Container.js
@@ -39,19 +39,15 @@ export default class Container extends Component {
     };
   }
 
-  moveCard(id, afterId) {
+  moveCard(dragIndex, hoverIndex) {
     const { cards } = this.state;
-
-    const card = cards.filter(c => c.id === id)[0];
-    const afterCard = cards.filter(c => c.id === afterId)[0];
-    const cardIndex = cards.indexOf(card);
-    const afterIndex = cards.indexOf(afterCard);
+    const dragCard = cards[dragIndex];
 
     this.setState(update(this.state, {
       cards: {
         $splice: [
-          [cardIndex, 1],
-          [afterIndex, 0, card]
+          [dragIndex, 1],
+          [hoverIndex, 0, dragCard]
         ]
       }
     }));