The Simplest Drag n Drop using React.js

react-drag-n-drop

var DragNDrop = React.createClass({
	// this set the data your want to transfer to the drop-zone
	handleDragStart: function (e) {
		e.dataTransfer.setData("text", e.target.id);
	},

	// not important
	handleDragEnd: function (e) {
		e.preventDefault();
	},

	// this handles what happens onDrop
	handleDrop: function (e) {
		e.preventDefault();
		var data = e.dataTransfer.getData("text");
		e.target.appendChild(document.getElementById(data));
	},

	// important!! not going to work without this
	handleDragOver: function (e) {
		e.preventDefault();
	},

	render: function () {
		var box = <div id="drag-box" className="drag-box" draggable="true">
								<div onDragStart={this.handleDragStart}
										 onDragEnd={this.handleDragEnd}>
									drag this
								</div>
							</div>;
		return (
			<div className="drag-n-drop">
				<div id="drop-1"
						 className="drop-zone"
						 onDrop={this.handleDrop}
						 onDragOver={this.handleDragOver}>
					BOX 1
					{box}
				</div>
				<div id="drop-2"
						 className="drop-zone"
						 onDrop={this.handleDrop}
						 onDragOver={this.handleDragOver}>
					BOX 2
				</div>
			</div>
		);
	}
});