Quick blueprint / react-dnd implementation

Card.jsx

// Let's make <Card text='Write the docs' /> draggable!

import * as React from "react";
import { DragSource } from "react-dnd";

/**
 * Implements the drag source contract.
 */
const cardSource = {
  beginDrag(props) {
    return {
      text: props.text
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Card extends React.Component {
  render() {
    const { isDragging, connectDragSource, text } = this.props;
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>{text}</div>
    );
  }
}

// Export the wrapped component:
export default DragSource("CARD", cardSource, collect)(Card);

index.css

.example-card {
  margin: 10px 0px;
}

.example-header {
  font-size: 24px;
  font-weight: bold;
  border-bottom: 1px solid #e1e8ed;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

index.jsx

import * as React from "react";
import { render } from "react-dom";
import { Tree } from "@blueprintjs/core";
import Card from "./Card";

import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";

@DragDropContext(HTML5Backend, /* optional */ { window })
class App extends React.Component {
  render() {
    return (
      <div>
        <Tree
          contents={[
            { id: 1, label: <Card text="First" /> },
            { id: 2, label: <Card text="Second" /> }
          ]}
        />
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));