Kaynağa Gözat

Different drop cases

Benoît Hubert 7 yıl önce
ebeveyn
işleme
25aea5891a
1 değiştirilmiş dosya ile 29 ekleme ve 1 silme
  1. 29 1
      react-admin/src/components/Home.js

+ 29 - 1
react-admin/src/components/Home.js

@@ -214,7 +214,35 @@ this.props.tree.onDragOver(this);
     e.stopPropagation();
     console.log('drop on ', this.props.item.title);
 
+    // 4 cas:
+    // a. move dans même parent (drop sur sibling)
+    // b. move dans même parent MAIS à index 0 (drop sur le parent)
+    // c. move vers parent différent (drop sur futur sibling)
+    // d. move vers parent différent (drop sur parent différent)
+    const draggedItemLevel = this.props.tree.state.draggedItem.props.level;
+    const targetLevel = this.props.level;
+    if(targetLevel === draggedItemLevel) {
+      console.log(this.props.tree.state.draggedItem.props.parent, this.props.parent)
+      if(this.props.tree.state.draggedItem.props.parent === this.props.parent) {
+        console.log('drop on sibling');
+      }
+      else {
+        console.log('drop on other')
+      }
+    }
+    else if(targetLevel === draggedItemLevel - 1) {
+      console.log('drop on a parent', this, this.props.item.title);
+      if(this.props.tree.state.draggedItem.props.parent === this) {
+        console.log('dropped on same parent');
+      }
+      else {
+        console.log('dropped on other parent')
+      }
+    }
 
+    this.setState({
+      dragOver: false
+    });
   }
 
   onDragOver(e) {
@@ -247,7 +275,7 @@ this.props.tree.onDragOver(this);
         <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} />
+          <TreeNode parent={this} tree={tree} item={item} index={i} key={item.title} path={ path + '.' + i} level={level + 1} />
         )}
       {(this.state.dragOver && ! this.state.boxPositionAbove) ? <div style={dragPlaceholderStyles}></div> : ''}
       </div>