react-web-tutorial/react-admin/src/components/Home.js

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';
import { intro } from '../resources/const';
const markdown = require('../resources/markdown.json');

const getHandleId = (() => {
  let id = 0;
  return () => ('handle-' + (++id));
})();
console.log(getHandleId(), getHandleId());

function getSectionLinks() {
  return (
    <ul>
    {markdown.map((section, sIndex) => (
      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
    ))}
    </ul>
  );
}

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: [] }
];

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} />
        )}
      </div>
    );
  }
}

/*
 * get DOM ref    =>  https://reactjs.org/docs/refs-and-the-dom.html
 * dnd w/ handle  =>  https://github.com/jdiamond/html5-examples/blob/master/drag-and-drop/drag-handle.html
 */
class TreeNode extends React.Component {
  constructor(props) {
    super(props);
    this.onMouseDown = this.onMouseDown.bind(this);
    this.onDragStart = this.onDragStart.bind(this);
  }

  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);
    
    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();
        }
    // };
  }

  render() {
    const { name, 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} />
        )}
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div className="page">
        <div className="breadcrumb-wrapper">
          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
          <span className="breadcrumb grey-text">Accueil</span>
        </div>

        <Tree items={tutos} />
      </div>
    );
  }
}

export default Home;