React/Dnd: Rendre un composant draggable et droppable en même temps

Question

Il y a plusieurs éléments, que je veux faire glisser et déposer en même temps - en utilisant react dnd. Cela signifie que je dois faire glisser l'un des éléments et le déposer sur un autre élément.

J'ai d'abord défini le dragSource pour MyComponent. Cela fonctionne jusqu'à présent. Mais comment dois-je configurer le DropTarget pour le même composant?

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

Ceci est possible avec React-DND. Il nécessite l'exportation de l'élément draggable à la fois en tant que source et cible.

Vous pouvez définir le composant comme

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; 

Un exemple pour le même est disponible here. Il utilise des générateurs cependant.