如何通过拖放操作触发拖放事件?

问题描述 投票:0回答:1

我正在使用带有react的react-dragula模块。为了简单说明,我实际上是在制作trello克隆。当“ AppItem / Card”从一个Dragula容器(“ Phase”)移到另一个容器时,我想触发一个事件,该事件会更改数据库中的“状态”。

我的问题是在哪里以及如何触发'drop'上的dragula.on事件,这些文档适用于原始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>
    )
  }
}
reactjs dom dom-events dragula react-dragula
1个回答
0
投票

您可以使用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属性。

© www.soinside.com 2019 - 2024. All rights reserved.