Created
October 20, 2015 08:03
-
-
Save EdmundLeex/52eca47340e150246931 to your computer and use it in GitHub Desktop.
The Simplest Drag n Drop using React.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment