如何使用Dragula on drop触发drop事件？

Question

我在react中使用react-dragula模块。出于简单解释的目的，我实际上是在创建一个trello克隆。当“AppItem/Card”从一个dragula容器(“阶段”)移动到另一个容器时，我想触发一个事件来改变它在数据库中的“状态”。

我的问题是，我在哪里以及如何触发'drop‘上的dragula.on事件，文档是针对普通javascript的，我不确定如何将其转换为我的React组件。我试着在我的构造函数中，在各种组件方法中编写我的DOM事件，但是不能让另一个DOM事件工作，甚至不能记录事件正在发生。

下面是包装动态呈现的dragula容器的组件

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>

    )
}
}

下面是column/'Phase‘组件本身

  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

您可以使用Dragula API下的drop事件回调。

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

在上面的代码示例中，el是指被拖放的html元素，而target是指el被拖放到的html容器元素。

此外，this.props.moveCard只是一个示例函数，它可以发出更新数据库的http请求，并向其传递el.id和target.id，前者是被删除元素的id，后者是容器元素的id。

因此，在phase组件中，您可以向div元素添加id属性：

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

您也可以对容器元素执行相同的操作，向其添加id属性。