bevacqua / react-dragula

:ok_hand: Drag and drop so simple it hurts
http://bevacqua.github.io/react-dragula
MIT License
994 stars 77 forks source link

Drop target not working between two divs? #29

Open galileomd opened 7 years ago

galileomd commented 7 years ago

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 7 years ago

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

galileomd commented 7 years ago

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