如何在 react-dragula 中将 dragula 可拖动元素移动到另一个 div?
how to move a dragula draggable element to another div in react-dragula?
我在使用 react-dragula 库时遇到问题 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;
在 ProjectList 上只使用一个 Drake 对象,并将 ProjectCol 的所有 DOM 个元素作为容器推送到使用过的 Drake 中。
我在使用 react-dragula 库时遇到问题 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;
在 ProjectList 上只使用一个 Drake 对象,并将 ProjectCol 的所有 DOM 个元素作为容器推送到使用过的 Drake 中。