dnd

by evgkch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="root"></div>

SCSS

.box {
  margin: 20px;
  
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    padding: 20px;
    background-color: red;
  }
}

Babel + JSX

class App extends React.Component {
	constructor() {
  	super();
  }
	render() {
  	return(
    	<div className="box">
    	  {Array.from({ length: 5 }, (v, k) =>
        	<DND key={k}>
        	  <div>{k + 1}</div>
        	</DND>
        )}
    	</div>
    );
  }
}

class DND extends React.Component {
	constructor(props) {
  	super(props);
  }
  render() {
  	const { children } = this.props;
  	return(
    	<div
        className="content"
        draggable={true}
        ref={(el) => { this.el = el }}
      >
        {children}
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'))