IT技术 - React/Dnd：使组件同时可拖放 - 吾爱随笔录

有多个元素，我想同时获得可拖动和可放置的效果 - 使用react dnd. 这意味着我需要拖动其中一个元素并将其放在另一个元素上。

首先，我为 MyComponent 定义了 dragSource。到目前为止，这是有效的。但是我必须如何为同一个组件设置 DropTarget 呢？

import React, { Component } from 'react'
import { DragSource, DropTarget } from 'react-dnd'

const elementSource = {
  beginDrag (props) {
    return { }
  }
}
const elementTarget = {
  drop (props, monitor) { }
}

function collect (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  }
}

class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} >
        Just an example
      </div>
    )
  }
}

export default DragSource('element', elementSource, collect)(MyComponent)

class MyComponent extends Component { render () { const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props return connectDragSource(connectDropTarget( <div style={{ opacity: isDragging ? 0.5 : 1 }} > Just an example </div> )) } } MyComponent = DragSource('MyComponent', elementSource, (connect, monitor) => ({ connectDragSource: connect.dragSource(), isDragging: monitor.isDragging() }))(MyComponent); MyComponent = DropTarget('MyComponent', elementTarget, connect => ({ connectDropTarget: connect.dropTarget(), }))(MyComponent); export default MyComponent;