如果所有三个容器都使用一种方法呈现，如何使所有三个容器在 Dragula 中都可拖动?使用 React js 和 Dra

Question

在这里反应初学者。所以基本上，我希望有 3 列，其中包含可以拖动以在同一列内重新排序或移动到不同列的元素。它的代码分为 2 个类，以分离每列中的相关元素。

下面是定义每列结构的类 (Swimlane.js( 的代码：

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>);
}
}

泳道.js在下一个类中称为 Board.js，以实际渲染所有组件。

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>
);
}
}

因此，方法getClients((用于制作"状态"道具和"泳道"道具，renderSwimlane((方法使用它们来渲染3列，所有列都带有相关信息。

现在，如果我运行此代码，则三个"Swimlane-dragColumn"div 中的所有可拖动元素都可以在自己的容器中排序，但不能移动到其他容器中。另外，请忽略导入 Card.js 的语句，它是一个基本上显示每个可拖动元素应该是什么样子(颜色等(的类。

这里提出了一个类似的问题(如何将一个德拉古拉可拖动元素移动到反应德拉古拉中的另一个div？ 但我不明白答案是什么意思(由于缺乏声誉，我无法发表评论(。如何获得类名为"Swimlane-dragColumn"的所有三列，这些列将被呈现为可行的容器？我已经能够发现我应该在某处使用"推送"功能，但我不知道如何实现它。

谢谢

Answer 1

componentDidMount(){
Dragula(Array.from(document.getElementsByClassName('Swimlane-dragColumn')))
}
componentDidUpdate(){
Dragula(Array.from(document.getElementsByClassName('Swimlane-dragColumn')))
}

我相信这是来自夏尔巴人内部，任务与反应钩子有关，请尝试此操作并继续工作

Answer 2

如果你愿意添加一个库，我在这里写了这个： https://github.com/jpribyl/react-hook-dragula

它提供了强大的类型，并允许您在react环境中轻松使用dragula。它只将 22kb 添加到您的捆绑包中(假设您已经拥有 react + dragula(

在我看来，您只需要多个容器即可获得所需的结果。此演示中的第一个示例应该类似：https://johnpribyl.com/react-hook-dragula/

此处提供的代码：https://github.com/jpribyl/react-hook-dragula/blob/main/example/src/examples/TwoContainerExample.tsx

如果有什么不清楚的地方，请告诉我！我相信您的解决方案将是这样的：

<Dragula className="row">
<DragulaContainer className="col">
<Draggable>
column 1
</Draggable>
</DragulaContainer>
<DragulaContainer className="col">
<Draggable>
column 2
</Draggable>
</DragulaContainer>
<DragulaContainer className="col">
<Draggable>
column 3
</Draggable>
</DragulaContainer>
</Dragula>