Trying to make react-dnd work. Going to try other libraries now.

Author: fritz-c

src/react-sortable-tree.js

@@ -77,6 +77,8 @@ class ReactSortableTree extends Component {
         };
 
         this.startDrag = this.startDrag.bind(this);
+        this.endDrag   = this.endDrag.bind(this);
+        this.dragHover = this.dragHover.bind(this);
     }
 
     componentWillMount() {
@@ -117,6 +119,23 @@ class ReactSortableTree extends Component {
         });
     }
 
+    dragHover({ node, parentPath, childIndex }) {
+        const draggingTreeData = addNodeUnderParentPath({
+            treeData: this.state.draggingTreeData,
+            newNode: {
+                ...node,
+                expanded: false
+            },
+            newParentPath: parentPath,
+            newChildIndex: childIndex,
+            getNodeKey: this.getNodeKey,
+        });
+
+        this.setState({
+            rows: this.getRows(draggingTreeData),
+        });
+    }
+
     endDrag({ node, path }, dropResult) {
         if (!dropResult) {
             return this.setState({
@@ -216,13 +235,15 @@ class ReactSortableTree extends Component {
                 path={path}
                 lowerSiblingCounts={lowerSiblingCounts}
                 scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
+                dragHover={this.dragHover}
             >
                 <NodeContentRenderer
                     node={node}
                     path={path}
                     lowerSiblingCounts={lowerSiblingCounts}
                     treeIndex={treeIndex}
                     startDrag={this.startDrag}
+                    endDrag={this.endDrag}
                     toggleChildrenVisibility={this.toggleChildrenVisibility}
                     scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
                     {...nodeProps}

src/utils/drag-and-drop-utils.js

@@ -11,6 +11,7 @@ const myDragSource = {
         props.startDrag(props);
 
         return {
+            node: props.node,
             path: props.path,
         };
     },
@@ -20,16 +21,38 @@ const myDragSource = {
     },
 };
 
+export function getParentPathFromOffset(
+    sourcePath,
+    targetPath,
+    initialOffsetDifferenceX,
+    scaffoldBlockPxWidth
+) {
+    const blocksOffset = Math.round(initialOffsetDifferenceX / scaffoldBlockPxWidth);
+    return targetPath.slice(0, Math.max(0, sourcePath.length + blocksOffset));
+}
+
 const myDropTarget = {
-    drop: (props, _monitor) => {
-        // TODO: use the offset to determine the path
-        const { path } = props;
-        return {
+    drop: ({ path, scaffoldBlockPxWidth }, monitor) => ({
+        path: getParentPathFromOffset(
+            monitor.getItem().path,
             path,
-        };
-    },
+            monitor.getDifferenceFromInitialOffset().x,
+            scaffoldBlockPxWidth
+        )
+    }),
+
+    hover({ path, dragHover, scaffoldBlockPxWidth }, monitor) {
+        dragHover({
+            node: monitor.getItem().node,
+            parentPath: getParentPathFromOffset(
+                monitor.getItem().path,
+                path,
+                monitor.getDifferenceFromInitialOffset().x,
+                scaffoldBlockPxWidth
+            ),
+            childIndex: 0,
+        });
 
-    hover(_props, _monitor) {
         // const { treeIndex: draggedId } = monitor.getItem();
         // const { treeIndex: overId } = props;
 
@@ -41,7 +64,7 @@ const myDropTarget = {
 
     canDrop(props, monitor) {
         // Cannot drag into a child path, and cannot drag into your current path
-        return monitor.getItem().path
+        return typeof props.children !== 'function' && monitor.getItem().path
             .some((key, index) => (props.path[index] !== key));
     },
 };

src/utils/drag-and-drop-utils.test.js

@@ -0,0 +1,38 @@
+import {
+    getParentPathFromOffset,
+} from './drag-and-drop-utils';
+
+describe('getParentPathFromOffset', () => {
+    it('should handle same-size path', () => {
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2], -999, 10)).toEqual([]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],  -16, 10)).toEqual([]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],   -6, 10)).toEqual([1]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],    0, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],    1, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],    6, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],   16, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2],  999, 10)).toEqual([1, 2]);
+    });
+
+    it('should handle longer targetPath', () => {
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3], -999, 10)).toEqual([]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],  -16, 10)).toEqual([]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],   -6, 10)).toEqual([1]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],    0, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],    1, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],    6, 10)).toEqual([1, 2, 3]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],   16, 10)).toEqual([1, 2, 3]);
+        expect(getParentPathFromOffset(['a', 'b'], [1, 2, 3],  999, 10)).toEqual([1, 2, 3]);
+    });
+
+    it('should handle longer sourcePath', () => {
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2], -999, 10)).toEqual([]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],  -16, 10)).toEqual([1]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],   -6, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],    0, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],    1, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],    6, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],   16, 10)).toEqual([1, 2]);
+        expect(getParentPathFromOffset(['a', 'b', 'c'], [1, 2],  999, 10)).toEqual([1, 2]);
+    });
+});