how to move a dragula draggable element to another div in react-dragula?

Question

i'm having an issue with the react-dragula library https://github.com/bevacqua/react-dragula

i can create a column of draggable items but the items inside each column aren't exchangable with other columns, they can only be dragged inside their columns, so how can i make them draggable inside other columns ? (thanx in advance) here's my code for the a column of draggable items

import React, {Component} from 'react';
import ProjectWidget from './ProjectWidget';
import Dragula from 'react-dragula';

class ProjectCol extends Component{
    render(){

        var dragulaDecorator = (componentBackingInstance) => {
          if (componentBackingInstance) {
            let options = { };
            Dragula([componentBackingInstance], options);
          }
        };

        return(
            <div>
            <div className="scrum_column_heading">To Do</div>
            <div className="scrum_column">
                <div id="scrum_column_todo" ref={dragulaDecorator} className="dragula dragula-vertical">

                    <ProjectWidget />

                </div>
            </div>
            </div>
        );
    }
}

export default ProjectCol;

and here's the code for viewing multiple columns together

import React, {Component} from 'react';
import ProjectCol from './ProjectCol';


class ProjectList extends Component{

    render(){
        return (
            <div class="scrum_board_overflow">
            <div id="scrum_board" class="uk-clearfix">
                <ProjectCol />
                <ProjectCol />
                <ProjectCol />
            </div>
            </div>
        );
    }
}

export default ProjectList;

Answer 1

Use only one Drake object on the ProjectList and push all DOM elements for the ProjectCol as containers in the used Drake.