detect drop

react-admin/src/components/Home.js

@@ -88,7 +88,9 @@ class TreeNode extends React.Component {
     this.onMouseDown = this.onMouseDown.bind(this);
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragOver = this.onDragOver.bind(this);
+    this.onDragEnter = this.onDragEnter.bind(this);
     this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDrop = this.onDrop.bind(this);
     this.state = {
       dragged: false, dragOver: false, aboveMidLine: false
     };
@@ -100,6 +102,7 @@ class TreeNode extends React.Component {
 
   onMouseDown(e) {
     this.dragTarget = e.target;
+    console.log('drag target', e.target);
   }
 
   onDragStart(e) {
@@ -108,6 +111,7 @@ class TreeNode extends React.Component {
       e.preventDefault();
       return;
     }
+    console.log('drag target', e.target);
     
     const { draggable } = this;
     var handle = draggable.getElementsByClassName('drag-handle')[0];
@@ -127,7 +131,7 @@ class TreeNode extends React.Component {
     }
   }
 
-  onDragOver(e) {
+  onDragEnter(e) {
     e.stopPropagation();
      // 'drag-over';
     const coordKeys = Object.keys(e).filter(k => k.match(/^[a-z]+(X|Y)$/));
@@ -150,6 +154,7 @@ this.props.tree.onDragOver(this);
     console.log(this.props.index, 'levels', this.props.tree.state.draggedItem.props.level, this.props.level);
 
 
+
     this.scheduleDragOverChange(1);
   }
 
@@ -162,9 +167,28 @@ this.props.tree.onDragOver(this);
     this.drags += change;
     // const { dragged, dragOver,  }
     this.timeout = setTimeout(() => {
+      const dragOver = self.drags > 0;
+      let boxPositionAbove;
+      let boxBorderColor = 'blue';
       console.log('drags change/total', change, self.drags)
+      
+      const draggedItemLevel = this.props.tree.state.draggedItem.props.level;
+      const targetLevel = this.props.level;
+
+      if(dragOver) {
+        if(targetLevel === draggedItemLevel) {
+          boxPositionAbove = false;
+        }
+        else if(targetLevel === (draggedItemLevel - 1)) {
+          boxPositionAbove = true;
+        }
+        else {
+          boxBorderColor = 'red';
+        }
+      }
+
       this.setState({
-        dragOver: self.drags > 0
+        dragOver, boxPositionAbove, boxBorderColor
       });
     }, 80);
   }
@@ -185,28 +209,47 @@ this.props.tree.onDragOver(this);
     // console.log('dragleave', this.state.dragOver);
   }
 
+  onDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('drop on ', this.props.item.title);
+
+
+  }
+
+  onDragOver(e) {
+    e.preventDefault();
+    return false;
+  }
+
   render() {
     const { title, items } = this.props.item;
     const { tree, path, level } = this.props;
-    const { dragOver, aboveMidLine } = this.state;
-    const paddingLeft = (level * 15) + 'px';
+    const { dragOver, aboveMidLine, boxBorderColor } = this.state;
+    const marginLeft = (level * 15) + 'px';
     const dragPlaceholderStyles = {
-      minHeight: '39px', border: '1px dashed blue'
+      minHeight: '39px', border: '1px dashed ' + (boxBorderColor || '#F0F')
+    }
+    if(this.state.boxPositionAbove) {
+      dragPlaceholderStyles.marginLeft = (level * 30) + 'px';
     }
     return (
       <div draggable
         ref={(div) => { this.draggable = div; }}
           className={ "tree-node" + (dragOver ? ' drag-over' : '') }
-          style={{ paddingLeft }}
+          style={{ marginLeft }}
           onMouseDown={this.onMouseDown}
           onDragStart={this.onDragStart}
-          onDragEnter={this.onDragOver}
-          onDragLeave={this.onDragLeave}>
+          onDragEnter={this.onDragEnter}
+          onDragLeave={this.onDragLeave}
+          onDragOver={this.onDragOver}
+          onDrop={this.onDrop}>
         <h5><i id={ this.hid } className="material-icons drag-handle">drag_handle</i><span>{ title }</span></h5>
+      {(this.state.dragOver && this.state.boxPositionAbove) ? <div style={dragPlaceholderStyles}></div> : ''}
         {(items || []).map((item, i) =>
           <TreeNode tree={tree} item={item} index={i} key={item.title} path={ path + '.' + i} level={level + 1} />
         )}
-      {this.state.dragOver ? <div style={dragPlaceholderStyles}></div> : ''}
+      {(this.state.dragOver && ! this.state.boxPositionAbove) ? <div style={dragPlaceholderStyles}></div> : ''}
       </div>
     );
   }