React beginner here. So basically, I want to have 3 columns with elements that can be dragged to reorder inside the same column or move to a different column. The code for it is separated into 2 classes to separate what relevant element should be in each column.
Here is the code for the class (Swimlane.js) that defines the structure of each column:
import React from 'react';
import Card from './Card';
import Dragula from 'dragula';
import './Swimlane.css';
export default class Swimlane extends React.Component {
render() {
const dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = {
moves: function (el, source, handle, sibling) {
return true;
},
accepts: function (el, target, source, sibling) {
return true;
},
direction: 'vertical',
copy: false,
copySortSource: false,
revertOnSpill: false,
removeOnSpill: false,
mirrorContainer: document.body,
ignoreInputTextSelection: true,
}
console.log('componentBackingInstance: ');
console.log(componentBackingInstance);
Dragula([componentBackingInstance]);
}
};
const cards = this.props.clients.map(client => {
return (
<Card
key={client.id}
id={client.id}
name={client.name}
description={client.description}
status={client.status}
/>
);
})
return (
<div className="Swimlane-column" class="Swimlane Column">
<div className="Swimlane-title">{this.props.name}</div>
<div className="Swimlane-dragColumn" ref={dragulaDecorator}> {/* this is the column that contains all my elements, and the one I want to make my container */}
{cards}
</div>
</div>);
}
}
Swimlane.js is called in this next class, Board.js to actually render all the components.
import React from 'react';
import Dragula from 'dragula';
import 'dragula/dist/dragula.css';
import Swimlane from './Swimlane';
import './Board.css';
export default class Board extends React.Component {
constructor(props) {
super(props);
const clients = this.getClients();
this.state = {
clients: {
backlog: clients.filter(client => !client.status || client.status === 'backlog'),
inProgress: clients.filter(client => client.status && client.status === 'in-progress'),
complete: clients.filter(client => client.status && client.status === 'complete'),
}
}
this.swimlanes = {
backlog: React.createRef(),
inProgress: React.createRef(),
complete: React.createRef(),
}
}
getClients() {
return [
// [id, name, description, status]
['1','Name 1','Description 1', 'backlog'],
['2','Name 2','Description 2', 'in-progress'],
['3','Name 3','Description 3', 'backlog'],
['4','Name 4','Description 4', 'complete'],
].map(companyDetails => ({
id: companyDetails[0],
name: companyDetails[1],
description: companyDetails[2],
status: companyDetails[3],
}));
}
renderSwimlane(name, clients, ref) {
return (
<Swimlane name={name} clients={clients} dragulaRef={ref}/>
);
}
render() {
return (
<div className="Board">
<div className="container-fluid">
<div className="row">
<div className="col-md-4">
{this.renderSwimlane('Backlog', this.state.clients.backlog, this.swimlanes.backlog)}
</div>
<div className="col-md-4">
{this.renderSwimlane('In Progress', this.state.clients.inProgress, this.swimlanes.inProgress)}
</div>
<div className="col-md-4">
{this.renderSwimlane('Complete', this.state.clients.complete, this.swimlanes.complete)}
</div>
</div>
</div>
</div>
);
}
}
So, the method getClients() is used to make a 'state' prop and a 'swimlanes' prop which are used by the renderSwimlane() method to render 3 columns all with relevant information.
Right now, if I run this code all draggable elements inside the three 'Swimlane-dragColumn' divs can be ordered inside their own containers, but cannot be moved to other containers. Also, please ignore the statement importing Card.js, it is a class that basically shows what each draggable element should look like (colour etc.).
A similar question was asked here (how to move a dragula draggable element to another div in react-dragula?) but I cant understand what the answer means (and I can't comment because of Lack of Reputation). How do I get all three columns which have the classname 'Swimlane-dragColumn' that would be rendered to be considered as viable containers? I have been able to find out that I am supposed to use the 'push' function somewhere but I don't know how I to implement that.
Thanks
