Как я могу сделать все три контейнера перетаскиваемыми в Dragula, если все три визуализируются с помощью метода? Использование React js и Dragula (не React-dragula)

Question

Здесь новичок в React. По сути, я хочу иметь 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>);
  }

}

Swimlane. 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 () используется для создайте свойство 'state' и свойство 'swimlanes', которые используются методом renderSwimlane () для визуализации 3 столбцов с соответствующей информацией.

Прямо сейчас, если я запустил этот код, все перетаскиваемые элементы внутри трех Дивы Swimlane-dragColumn можно заказать внутри своих контейнеров, но нельзя перемещать в другие контейнеры. Также не обращайте внимания на оператор импорта Card. js, это класс, который в основном показывает, как должен выглядеть каждый перетаскиваемый элемент (цвет et c.).

Здесь был задан аналогичный вопрос ( как переместить перетаскиваемый элемент dragula в другой div в response-dragula? ), но я не могу понять, что означает ответ (и я не могу комментировать из-за отсутствия репутации). Как мне получить все три столбца с именем класса Swimlane-dragColumn, которые будут отображаться как жизнеспособные контейнеры? Мне удалось узнать, что где-то я должен использовать функцию pu sh, но я не знаю, как это реализовать.

Спасибо

Answer 1

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

Я считаю, что это изнутри шерпа, и задача связана с реагированием на хуки, попробуйте это и работайте дальше