React/Dnd : 동시에 구성 요소를 드래그하고 놓을 수있게 만들기

Question

react dnd을 사용하여 동시에 드래그 가능하고 삭제 가능하게하려는 여러 요소가 있습니다. 즉, 요소 ​​중 하나를 드래그하여 다른 요소 위에 놓아야 함을 의미합니다.

먼저 MyComponent에 dragource를 정의했습니다. 그건 지금까지 작동합니다. 하지만 동일한 구성 요소에 대해 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에서 가능합니다. 소스와 대상 모두로 드래그 가능한 요소를 내 보내야합니다.

동일 here 볼 수 있습니다 당신은

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; 

로 예를 구성 요소를 정의 할 수 있습니다. 그것은 발전기를 사용합니다.