Implement actual swapping on drag and drop

This commit is contained in:
Jonny 2019-04-16 13:51:23 +02:00
parent 88408b7543
commit 11d607c08b
1 changed files with 15 additions and 4 deletions

View File

@ -128,7 +128,18 @@ export default class EditableStringList extends React.Component {
}
onGroupSwitch(src, dest) {
console.log('Switched src (' + JSON.stringify(src) + ') to dest (' + JSON.stringify(dest) + ')' );
const groupCopy = this.state.groups.slice();
const srcTeam = groupCopy[src.group][src.team];
const destTeam = groupCopy[dest.group][dest.team];
groupCopy[src.group].splice(src.team, 1, destTeam);
groupCopy[dest.group].splice(dest.team, 1, srcTeam);
this.setState({
groups: groupCopy
});
this.props.onGroupsChange(this.state.groups);
}
render() {
@ -187,9 +198,9 @@ class GroupView extends React.Component {
<CardTitle>Group {groupindex + 1}</CardTitle>
{group.map((team, teamindex) => (
<div key={team} draggable droppable="droppable"
onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)}
onDragOver={(e) => this.onDragOver(e)}
onDrop={(e) => this.onDrop(e, groupindex, teamindex)}>
onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)}
onDragOver={(e) => this.onDragOver(e)}
onDrop={(e) => this.onDrop(e, groupindex, teamindex)}>
<Item text={team} removeItem={this.props.removeTeam}/>