Как переместить перетаскиваемый элемент dragula в другой div в реагировать-draguula?

Question

У меня проблема с библиотекой реагировать-драгулы https://github.com/bevacqua/react-dragula

я могу создать столбец перетаскиваемых элементов, но элементы внутри каждого столбца не могут быть заменены другими столбцами, их можно перетаскивать только внутри своих столбцов, так как я могу сделать их перетаскиваемыми внутри других столбцов? (заранее спасибо) вот мой код для столбца перетаскиваемых элементов

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;

и вот код для просмотра нескольких столбцов вместе

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

Используйте только один объект Drake в ProjectList и поместите все элементы DOM для ProjectCol в качестве контейнеров в используемом Drake.