要将dragula可拖动元素移动到react-dragula中的另一个div,可以按照以下步骤进行操作:
import dragula from 'dragula';
import { DragulaDecorator } from 'react-dragula';
constructor(props) {
super(props);
this.dragulaDecorator = DragulaDecorator(this.handleDrop);
}
handleDrop = (el, target, source, sibling) => {
// 处理元素拖放完成后的操作
};
componentDidMount() {
const container = document.getElementById('container'); // 获取包含可拖动元素的容器
const drake = dragula([container]); // 创建dragula实例
drake.containers.push(document.getElementById('anotherContainer')); // 添加目标容器
this.dragulaDecorator(drake); // 将dragula实例与react-dragula进行绑定
}
render() {
return (
<div>
<div id="container">
<div className="drag-item" data-id="1">Item 1</div>
<div className="drag-item" data-id="2">Item 2</div>
<div className="drag-item" data-id="3">Item 3</div>
</div>
<div id="anotherContainer"></div>
</div>
);
}
handleDrop = (el, target, source, sibling) => {
const itemId = el.getAttribute('data-id');
// 根据itemId进行相应的操作
};
这样,当用户拖动可拖动元素时,它们将被移动到react-dragula中的另一个div中。注意,需要根据实际情况修改容器和元素的选择器,并根据需求进行相应的处理。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云