Commit b679d50e authored by lucia's avatar lucia
Browse files

drag and drop working

parent 35fea605
# proto2
## Installation
* npm install
......@@ -5,7 +8,7 @@
* visit `http://localhost:8080/`
# Seed project
## Seed project
[minimal-react-webpack-babel-setup](https://github.com/rwieruch/minimal-react-webpack-babel-setup)
......@@ -13,4 +13,4 @@ const App = ({ title }) =>
</DndProvider>
</div>;
export default App;
\ No newline at end of file
export default App;
import React from 'react';
import { Button, Card } from 'react-bootstrap';
import Cross from '../svg/Cross'
import TopRight from '../svg/TopRight'
import Cell from './Cell'
export default class Board extends React.Component {
constructor() {
super();
this.state = {
content: this.initContent()
};
this.onDrop = this.onDrop.bind(this);
}
initContent() {
var rows = [];
for (let i = 0; i < 5; i++) {
let cells = []
for (let j = 0; j < 5; j++) {
cells.push("empty");
}
rows.push(cells)
}
return rows
}
onDrop(row, col, item) {
var content = this.state.content;
content[row][col] = item;
this.setState({
content: content
});
console.log(content);
}
createRows() {
let rows = []
// Outer loop to create parent
for (let i = 0; i < 5; i++) {
let cells = []
//Inner loop to create children
for (let j = 0; j < 5; j++) {
cells.push(<td key={[i,j]} style={{border:"1px solid black",width:"80px",height:"80px"}}></td>)
cells.push(<Cell row={i} col={i} droppedItem={this.state.content[i][j]} onDrop={(item) => this.onDrop(i, j, item)}></Cell>);
}
//Create the parent and add the children
rows.push(<tr key={i}>{cells}</tr>)
}
return rows
......@@ -23,7 +47,7 @@ export default class Board extends React.Component {
render() {
return (
<div style={{display:"inline-block"}}>
<div style={{ display: "inline-block" }}>
<table style={{ borderColor: "black" }}>
<tbody>
{this.createRows()}
......
import React from 'react';
import { DropTarget } from "react-dnd";
import Cross from '../svg/Cross'
class Cell extends React.Component {
render() {
const { isOver, canDrop, connectDropTarget, droppedItem } = this.props;
return connectDropTarget(
<td key={[this.props.row, this.props.col]} style={{ border: "1px solid black", width: "80px", height: "80px", backgroundColor: isOver ? "green" : "" }}>
{droppedItem && droppedItem.id &&
<Cross size="30px"></Cross>
}
</td>
)
}
}
const spec = {
drop(props, monitor, component) {
const item = monitor.getItem();
props.onDrop(item);
}
};
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
isOverCurrent: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop()
};
}
export default DropTarget("SOURCE", spec, collect)(Cell);
......@@ -26,7 +26,7 @@ function collect(connect, monitor) {
const cardSource = {
beginDrag(props, monitor, component) {
const item = { id: props.id };
const item = { id: "cross" };
return item;
}
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment