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

import React，{Component}来自“React”
从'react dnd'导入{DragSource，DropTarget}
常量元素源={
开端（道具）{
返回{}
}
}
常量元素目标={
放下（道具，监视器）{}
}
功能收集（连接、监视）{
返回{
connectDragSource:connect.dragSource（），
IsDraging:monitor.IsDraging（），
connectDropTarget:connect.dropTarget（），
isOver:monitor.isOver（）
}
}
类MyComponent扩展组件{
渲染（）{
const{connectDragSource，IsDraging，connectDropTarget，isOver}=this.props
返回connectDragSource(
只是一个例子
)
}
}
导出默认DragSource（'element'，elementSource，collect）（MyComponent）

这在React DND中是可能的。 它需要将可拖动元素同时导出为源和目标

您可以将组件定义为

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;

类MyComponent扩展组件{
渲染（）{
const{connectDragSource，IsDraging，connectDropTarget，isOver}=this.props
返回connectDragSource（connectDropTarget(
只是一个例子
))
}
}
MyComponent=DragSource（'MyComponent'，elementSource，（connect，
监视器）=>({
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
}))（MyComponent）；
MyComponent=DropTarget（'MyComponent'，elementTarget，connect=>({
connectDropTarget:connect.dropTarget（），
}))（MyComponent）；
导出默认MyComponent；

---

这方面也有一个例子。但它使用发电机。

这在React DND中是可能的。 它需要将可拖动元素同时导出为源和目标

您可以将组件定义为

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;

类MyComponent扩展组件{
渲染（）{
const{connectDragSource，IsDraging，connectDropTarget，isOver}=this.props
返回connectDragSource（connectDropTarget(
只是一个例子
))
}
}
MyComponent=DragSource（'MyComponent'，elementSource，（connect，
监视器）=>({
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
}))（MyComponent）；
MyComponent=DropTarget（'MyComponent'，elementTarget，connect=>({
connectDropTarget:connect.dropTarget（），
}))（MyComponent）；
导出默认MyComponent；

这方面也有一个例子。不过它使用发电机