反應，和/ DND：使一個組件拖動和投擲的同時

Question

有多種元素，我想拖動和投擲的在同一時間 - 使用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) 

Answer 1

這對於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; 

一個例子，同樣是可用的here。儘管它使用了生成器。