使用React js和Dragula (不是react-dragula)

Question

React初学者在这里。因此，基本上，我希望有3列的元素，可以拖动到同一列内重新排序或移动到不同的列。它的代码被分成两个类，以分隔每个列中应该包含的相关元素。

下面是定义每列结构的类(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>);
  }

}

在下一个类Board.js中调用Swimlane.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>
    );
  }
}

因此，renderSwimlane()方法使用getClients()方法来生成一个“状态”属性和一个“泳道”属性，用于呈现3列，所有列都包含相关信息。

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

这里(how to move a dragula draggable element to another div in react-dragula?)也问了一个类似的问题，但我不明白答案是什么意思(由于缺乏声誉，我不能发表评论)。如何将类名为“Swimlane-dragColumn”的所有三列都呈现为可行的容器？我发现我应该在某个地方使用'push‘函数，但我不知道如何实现它。

谢谢

Answer 1

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

我相信这是来自sherpa内部的，任务是与react挂钩相关的，试着这样做，然后继续工作。

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>