dragover&dragleave

css/admin.css

@@ -0,0 +1,25 @@
+.tree-node {
+  position: relative;
+  padding: 2px;
+}
+.tree-node h5 {
+  margin: 0;
+  border: 1px solid #eee;
+}
+.tree-node h5 i {
+  padding: 5px 0 0 6px;
+  color: #777;
+  position: absolute;
+}
+.tree-node h5 span {
+  display: inline-block;
+  padding: 3px 10px;
+  border-left: 1px solid #eee;
+  margin-left: 35px;
+}
+.drag-handle {
+  /*top: 6px;*/
+}
+.tree-node.drag-over > h5 {
+  border: 1px solid red;
+}

react-admin/src/components/Home.js

@@ -58,6 +58,11 @@ class TreeNode extends React.Component {
     super(props);
     this.onMouseDown = this.onMouseDown.bind(this);
     this.onDragStart = this.onDragStart.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.state = {
+      dragOver: false
+    };
   }
 
   onMouseDown(e) {
@@ -80,12 +85,40 @@ class TreeNode extends React.Component {
     }
   }
 
+  onDragOver(e) {
+    e.stopPropagation();
+    this.setState({
+      dragOver: true
+    });
+     // 'drag-over';
+    console.log('dragover', e, this.state.dragOver, this.props.item.title);
+  }
+
+  onDragLeave(e) {
+    e.stopPropagation();
+    this.setState({
+      dragOver: false
+    });
+    // this.dragOver = '';
+    // console.log('dragleave', this.state.dragOver);
+  }
+
   render() {
     const { title, items } = this.props.item;
     const { level } = this.props;
+    const { dragOver } = this.state;
+    console.log('render', dragOver);
     const paddingLeft = (level * 15) + 'px';
     return (
-      <div className="tree-node" style={{ paddingLeft }} onMouseDown={this.onMouseDown} onDragStart={this.onDragStart} ref={(div) => { this.draggable = div; }} draggable>
+      <div
+        className={ "tree-node" + (dragOver ? ' drag-over' : '') }
+        style={{ paddingLeft }}
+        onMouseDown={this.onMouseDown}
+        onDragStart={this.onDragStart}
+        onDragOver={this.onDragOver}
+        onDragLeave={this.onDragLeave}
+        ref={(div) => { this.draggable = div; }}
+        draggable>
         <h5><i id={ getHandleId() } className="material-icons drag-handle">drag_handle</i><span>{ title }</span></h5>
         {(items || []).map(item =>
           <TreeNode item={item} key={item.title} level={level + 1} />