basic dragstart works

react-admin/src/components/Home.js

@@ -21,26 +21,28 @@ function getSectionLinks() {
 }
 
 const tutos = [
-  { name: 'JavaScript', items: [
-    { name: 'pouet', items: [
-      { name: 'pouet child', items: [] }
-    ] },
-    { name: 'popop', items: [] },
-    { name: 'douap', items: [] }
-  ] },
-  { name: 'jQuery', items: [] },
-  { name: 'AngularJS', items: [] },
-  { name: 'React', items: [] }
+  { title: 'JavaScript', items: markdown
+  // [
+  //   { title: 'pouet', items: [
+  //     { title: 'pouet child', items: [] }
+  //   ] },
+  //   { title: 'popop', items: [] },
+  //   { title: 'douap', items: [] }
+  // ]
+},
+  { title: 'jQuery', items: [] },
+  { title: 'AngularJS', items: [] },
+  { title: 'React', items: [] }
 ];
+console.log(tutos);
 
 class Tree extends React.Component {
   render() {
     const { items } = this.props;
     return (
       <div>
-        <h2>X</h2>
         {items.map(item =>
-          <TreeNode item={item} key={item.name} level={0} />
+          <TreeNode item={item} key={item.title} level={0} />
         )}
       </div>
     );
@@ -60,40 +62,33 @@ class TreeNode extends React.Component {
 
   onMouseDown(e) {
     this.dragTarget = e.target;
-    console.log('onMouseDown', this.dragTarget);
   }
 
   onDragStart(e) {
-    // e.preventDefault();
     e.stopPropagation();
-    console.log('onDragStart', this.props.item.name, this.draggable);
+    if(! this.props.item.dragTo) {
+      e.preventDefault();
+      return;
+    }
     
     const { draggable } = this;
     var handle = draggable.getElementsByClassName('drag-handle')[0];
-    console.log(this.draggable, handle.id)
-    // draggable.onmousedown = function(e) {
-    //     target = e.target;
-    // };
-    // draggable.ondragstart = function(e) {
-        if (handle.contains(this.dragTarget)) {
-          console.log('transfer to handle')
-            e.dataTransfer.setData('text/plain', handle.id);
-        } else {
-          console.log('abord onDragStart')
-            e.preventDefault();
-        }
-    // };
+    if (handle.contains(this.dragTarget)) {
+      e.dataTransfer.setData('text/plain', handle.id);
+    } else {
+      e.preventDefault();
+    }
   }
 
   render() {
-    const { name, items } = this.props.item;
+    const { title, items } = this.props.item;
     const { level } = this.props;
     const paddingLeft = (level * 15) + 'px';
     return (
       <div className="tree-node" style={{ paddingLeft }} onMouseDown={this.onMouseDown} onDragStart={this.onDragStart} ref={(div) => { this.draggable = div; }} draggable>
-        <h5><i id={ getHandleId() } className="material-icons drag-handle">drag_handle</i><span>{ name }</span></h5>
-        {items.map(item =>
-          <TreeNode item={item} key={item.name} level={level + 1} />
+        <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} />
         )}
       </div>
     );