Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple drag and drop
import React from "react";
const styles = {
width: "200px",
border: '1px solid #222',
height: "200px",
display: "inline-block",
verticalAlign: "top",
background: "#fff"
};
class DragNDrop extends React.Component {
handleDragStart = e => {
e.dataTransfer.setData("text", e.target.id);
};
// not important
handleDragEnd = e => {
e.preventDefault();
};
// this handles what happens onDrop
handleDrop = e => {
e.preventDefault();
const data = e.dataTransfer.getData("text");
alert(data);
};
// important!! not going to work without this
handleDragOver = e => {
e.preventDefault();
};
render() {
const box = (
<div id="drag-box" className="drag-box" draggable="true" onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd}>
<h1>
<b>draggable content</b>
</h1>
</div>
);
return (
<div className="drag-n-drop">
<div
id="drop-1"
className="drop-zone"
style={styles}
onDrop={this.handleDrop}
onDragOver={this.handleDragOver}
>
BOX 1
{box}
</div>
<div
id="drop-2"
className="drop-zone"
style={styles}
onDrop={this.handleDrop}
onDragOver={this.handleDragOver}
>
BOX 2
</div>
</div>
);
}
}
export default DragNDrop;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment