How do I prevent drop in originating container in react js and react-beautiful-dnd?
import React, { Component } from "react";
import { DragDropContext } from "react-beautiful-dnd";
import { Grid, Row } from "react-bootstrap";
import DroppableContainer from "./DroppableContainer";
const testData = {
container1Data: [
{ id: 1, name: "item 1" },
{ id: 2, name: "item 2" },
{ id: 3, name: "item 3" },
{ id: 4, name: "item 4" },
{ id: 5, name: "item 5" },
{ id: 6, name: "item 6" }
],
container2Data: [
{ id: 101, name: "other item 1" },
{ id: 102, name: "other item 2" }
]
};
export default class Workspace extends Component {
state = {
container1Data: testData.container1Data,
container2Data: testData.container2Data
};
onDragEnd = ({ destination, source }) => {
if (
!destination ||
destination.droppableId !== "Container2" ||
(destination.droppableId === source.droppableId &&
destination.index === source.index)
) {
return;
}
this.setState(prevState => {
const addItem = prevState.container1Data.splice(source.index, 1);
prevState.container2Data.splice(destination.index, 0, ...addItem);
return {
container1Data: [...prevState.container1Data],
container2Data: [...prevState.container2Data]
};
});
};
render = () => (
<DragDropContext onDragEnd={this.onDragEnd}>
<Grid bsClass="box-container">
<Row>
<DroppableContainer
droppableId="Container1"
title="Container 1"
data={this.state.container1Data}
dropDisabled
/>
<DroppableContainer
droppableId="Container2"
title="Container 2"
data={this.state.container2Data}
/>
</Row>
</Grid>
</DragDropContext>
);
}