React DnDを使ってみた

March 22, 2017

React でドラッグ＆ドロップを簡単に実装できるReact DnDを使ってみました。

前回同様、公式のチュートリアルに従ってます。

一応、成果物はこちら ↓

環境

create-react-appを使って React のプロジェクトを作り、yarnで React DnD を入れます。

$ create-react-app react-dnd-sample
$ cd react-dnd-sample
$ yarn add react-dnd react-dnd-html5-backend
$ yarn start

今回は次のコンポーネントを作ります。

コンポーネント以外には以下を用意します。

まあまあ長くなってしまったので、コードはGistを確認してみてください。

既存のコンポーネントに対し、ドラッグ対象ならDragSource、ドロップ対象ならDropTargetでラップして、後は少しメソッドを足してあげるだけで使えるので、けっこう使いやすいなと思いました。

例えばKnightクラスはドラッグされる対象なので、DragSourceでラップしています。

	import React, { Component, PropTypes } from 'react';
	import { ItemTypes } from './Constants';
	import { DragSource } from 'react-dnd';

	const knightSource = {
	beginDrag(props) {
	return {};
	}
	};

	function collect(connect, monitor) {
	return {
	connectDragSource: connect.dragSource(),
	connectDragPreview: connect.dragPreview(),
	isDragging: monitor.isDragging()
	}
	}

	class Knight extends Component {
	componentDidMount() {
	const img = new Image();
	img.src = 'data:image/png;base64,iVBORw0KGgoAAAA...'; // svg全体はチュートリアルを確認してください
	img.onload = () => this.props.connectDragPreview(img);
	}

	render() {
	const { connectDragSource, isDragging } = this.props;
	return connectDragSource(
	<div style={% raw %}{{
	opacity: isDragging ? 0.5 : 1,
	fontSize: 25,
	fontWeight: 'bold',
	cursor: 'move'
	}}{% endraw %}>
	♘
	</div>
	)
	}
	}

	Knight.propTypes = {
	connectDragSource: PropTypes.func.isRequired,
	connectDragPreview: PropTypes.func.isRequired,
	isDragging: PropTypes.bool.isRequired
	}

	export default DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight);

view raw Knight.js hosted with ❤ by GitHub

今回使っているreact-dnd-html5-backendだとタッチデバイスのときに動作しないのですが、 react-dnd-touch-backendというのもあるみたいなので次使ってみたいです。