如何在放置时使用 Dragula 触发放置事件？答案

【问题标题】：How to trigger events on drop with Dragula on drop?如何在放置时使用 Dragula 触发放置事件？
【发布时间】：2018-03-22 14:28:33
【问题描述】：

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

我的问题是我在哪里以及如何在“drop”上触发 dragula.on 事件，这些文档是针对 vanilla javascript 的，我不确定如何将其转换为我的 React 组件。我已经尝试在我的构造函数中，在各种组件方法中编写我的 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>

    )
}
}

这是列/“阶段”组件本身

  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>
    )
  }
}

【问题讨论】：

为什么你不使用原生 DnD 库而不是 Dragula 来简化你的生活？一个喜欢react-dnd.github.io/react-dnd
Atlassian 的react-beautiful-dnd 也很不错：github.com/atlassian/react-beautiful-dnd。 react-dragula 似乎真的是半信半疑，而且文档记录很差。

标签： reactjs dom dom-events dragula react-dragula

【解决方案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 是被删除元素的 id 和 target.id 这是被删除元素的 id容器元素。

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

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

你也可以对你的容器元素做同样的事情，给它添加一个 id 属性。

【讨论】：