bevacqua/react-dragula

Drop target not working between two divs?

galileomd opened this issue · 2 comments

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'));

I got the same issue,any idea? @galileomd
Is it a bug or something? @bevacqua

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'));