reactjs - drake.on drop not working on routing change "react-dragula"

Question

I am working on react js app, and using react-dragula to sort the list rows. It's working fine on page reload but having an issue if coming from another page to this listing page. Basically it's having an issue with routing(because it works on page reload)

I am using below mention version of packages::

react-dragula: 1.1.17 
react-router-dom: 5.2.0

This my code of list row::

import React, { Fragment } from "react";
import Dragula from "react-dragula";
import ListItem from 'Components/ListItem';

class MyListComp extends React.Component {

    /** variables */
    drake = null;
    containers = [];
    sequence = [];

    componentDidMount() {
        this.renderDragDrop();
    }
    
    renderDragDrop() {
        this.drake = Dragula(this.containers, {
            isContainer: function (el) {
                return (el.id === "seq-drag");
            },
            moves: function (el, source, handle, sibling) {
                return (handle.id === "seqSortBtn");
            },
        });
        this.drake.on("drop", async (el, target, source, sibling) => {
            if (target) {
                var ids = [];
                var parentElement = document.querySelector("#" + target.id); // Select parent element
                var childElements = parentElement.querySelectorAll(".seq-el"); // Select child elements
                for (var i = 0; i < childElements.length; i++) {
                    let objToPush = {
                        _id: childElements[i].getAttribute("id"),
                        seq: i + 1,
                    }
                    ids.push(objToPush);
                }
                this.sequence = ids; // store in variable;
            }
        });
    }

    render() {
        const { lists } = this.props;
        const dragulaDecorator = (componentBackingInstance) => {
            if (componentBackingInstance) {
                this.containers.push(componentBackingInstance)
            }
        };
        return (
            <Fragment>
                <div id="seq-drag" ref={dragulaDecorator}>
                    {lists && lists.length > 0 && lists.map((seq, key)=>(
                        <ListItem key={key} seq={seq} />
                    ))}
                </div>      
            </Fragment>
        )
    }
}

export default MyListComp;

Please suggest someone what is problem while loading component via routing using react-dragula? and is there any issue in react-dragula or we can resolve this using some custom code, please suggest.

question from:https://stackoverflow.com/questions/65624098/drake-on-drop-not-working-on-routing-change-react-dragula

Answer 1

Waitting for answers