How to trigger events on drop with Dragula on drop?

Question

I'm using the react-dragula module with react. For simple explanation purposes, I'm essentially making a trello clone. When an 'AppItem/Card' is moved from one dragula container ('Phase') to another, I want to trigger an event that changes it's 'status' in the db.

My question is where and how do I trigger dragula.on events on 'drop', the docs are for vanilla javascript and I'm not sure how to translate that over to my React component. I've tried writing my DOM events in my constructors, in various component methods, and can not get another to work or even log that an event is happening.

Here are my components that wraps dragula containers that are rendered dynamically

import React from 'react'
import dragula from 'react-dragula'
import Phase from './Phase.jsx'

export default class ProgressBoard extends React.Component{
constructor(props){
    super(props)
}

componentDidMount(){
  dragula(Array.from(document.getElementsByClassName('phase')))
}
componentDidUpdate(){
  dragula(Array.from(document.getElementsByClassName('phase')))
}

render(){

    return(
        <div className="progressboard-container">
  {
    this.props.phases.map((phase,i) => <Phase key={i} phase={phase} 
    applications={this.props.apps.filter(app => app.phase_id === 
    phase.id)}/>)
  }
  </div>

    )
}
}

Here is the column/'Phase' component itself

  import React, { Component } from 'react'
  import Appitem from './AppItem.jsx'
  import {Header, Card} from 'semantic-ui-react'



export default class Phase extends Component {
    constructor(props){
       super(props)
       this.state = {}
}
render(){
    return(
        <div className='phase'>
        <div className='PhaseTitle'>
        <Header size="large">{this.props.phase.phase_label}</Header>
        </div>
        {
          this.props.applications.map((app,i) =>  <div app={app} key= . 
         {i} className="AppItem">{app.company}</div>)
        }
        </div>
    )
  }
}

Answer 1

You can make use of the drop event callback under the Dragula API.

var drake = dragula(Array.from(document.getElementsByClassName('phase'))); drake.on('drop', (el, target) => { this.props.moveCard(el.id, target.id); });

In the code sample above, el refers to the html element being dropped and target refers to the html container element which el is being dropped into.

Also, this.props.moveCard is just a example function that could be making a http request to update the database and you pass it el.id which is the id of the element being dropped and target.id which is the id of the container element.

So in your phase component, you can add an id attribute to the div element:

{ this.props.applications.map((app,i) => <div id={app.id} app={app} key= . {i} className="AppItem">{app.company}</div>) }

and you can also do the same for your container element, adding a id attribute to it.