Drop target not working between two divs?
galileomd opened this issue · 2 comments
galileomd commented
hi, so i'm trying to drop elements from one div to another one.. it drags but doesnt drop into the second target. just extended the example code to add a second div - any suggestions?
console log shows both divs
import 'react-datepicker/dist/react-datepicker.css'
import * as React from "react";
import Dragula from 'react-dragula';
export class App extends React.Component {
render () {
return <div className='container' ref={this.dragulaDecorator}>
<div>Swap me around</div>
<div>Swap her around</div>
<div>Swap him around</div>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>
<div className='container' ref={this.dragulaDecorator}>
</div>;
},
dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = { };
Dragula([componentBackingInstance], options);
console.log(componentBackingInstance);
}
};
});
ReactDOM.render(<App />, document.getElementById('examples'));
2uncle-code commented
I got the same issue,any idea? @galileomd
Is it a bug or something? @bevacqua
galileomd commented
looks like the way the containers were being passed to Dragula was a little off..
this is what i ended up doing
import * as React from "react";
import Dragula from 'react-dragula';
export class App extends React.Component {
constructor (props) {
this.containers = []
}
componentDidMount () {
const drake = Dragula(this.containers, {revertOnSpill: true})
}
render () {
const dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
this.containers.push(componentBackingInstance)
}
}
return <div>
<div className='container' ref={dragulaDecorator}>
<div>Swap me around</div>
<div>Swap her around</div>
<div>Swap him around</div>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</div>
<div className='container' ref={dragulaDecorator} />
</div>;
}
};
ReactDOM.render(<App />, document.getElementById('examples'));