React DnD가 단일 카드 대신 전체 카드 목록을 끌기

Question

반응 프로젝트에서 반응 DnD를 사용하려고합니다. 내 렌더링 방법 나는이

render() { 
     var isDragging = this.props.isDragging; 
     var connectDragSource = this.props.connectDragSource; 

     var Populate = this.props.mediaFiles.map((value) => { 
      return(
       <div> 
       <MuiThemeProvider> 
        <Card style= {{marginBottom: 2, opacity: isDragging ? 0 : 1}} id={value.id} key={value.id} 
          onMouseOver={this.onMouseOver} 
          onMouseOut={this.onMouseOut} 
          //onTouchTap={() => {this.handleClick(value.id)}} 
          zDepth={this.state.shadow}> 
         <CardHeader 
          title={value.Episode_Name} 
          //subtitle={value.description} 
          actAsExpander={false} 
          showExpandableButton={false} 
         /> 
        </Card> 
       </MuiThemeProvider> 
       </div> 
       ) 
     }); 

및 방법이

return connectDragSource (
      <div> 
       <MuiThemeProvider> 
        <div className="mediaFilesComponent2"> 
         {Populate}  
        </div> 
       </MuiThemeProvider> 
      </div> 
     ) 

문제처럼 보이는 렌더링의 내 반환과 같은 카드의 목록을 반환 채우기 아래 표와 같은 이름의 변수를, 내가하려고 할 때입니다 정의 끌기를 사용하면 끌기를 위해 카드의 전체 목록이 선택됩니다. 나는 개인적인 끌기 기능이있는 모든 카드를 원한다.

Answer 1

각 카드의 드래그 기능을 사용하려면 전체 목록이 아닌 DragSource에 각 카드를 래핑해야합니다. 나는이처럼 DragSource에 싸서 그것의 자신의 구성 요소에 카드를 밖으로 분할 것 :

import React, { Component, PropTypes } from 'react'; 
import { ItemTypes } from './Constants'; 
import { DragSource } from 'react-dnd'; 


const CardSource = { 
    beginDrag: function (props) { 
    return {}; 
    } 
}; 

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

class CardDragContainer extends React.Component { 
    render() { 
    return this.props.connectDragSource(
     <div> 
     <Card style= {{marginBottom: 2, opacity: this.props.isDragging ? 0 : 1}} id={value.id} key={value.id} 
          onMouseOver={this.props.onMouseOver} 
          onMouseOut={this.props.onMouseOut} 
          zDepth={this.props.shadow}> 
      <CardHeader 
       title={props.title} 
       actAsExpander={false} 
       showExpandableButton={false} 
      /> 
      </Card> 
     </div> 
    ) 
    } 
} 

export default DragSource(ItemTypes.<Your Item Type>, CardSource, collect)(CardDragContainer); 

그런 다음이 같은 높은 수준의 구성 요소의 렌더링이 DragContainer을 사용합니다 :

render() { 
    var Populate = this.props.mediaFiles.map((value) => { 
     return(
     <div> 
      <MuiThemeProvider> 
       <CardDragContainer 
       value={value} 
       onMouseOver={this.onMouseOver} 
       onMouseOut={this.onMouseOut} 
       shadow={this.state.shadow} 
       /> 
      </MuiThemeProvider> 
     </div> 
    ) 
    }); 

    return (
    <div> 
     <MuiThemeProvider> 
     <div className="mediaFilesComponent2"> 
      {Populate}  
     </div> 
     </MuiThemeProvider> 
    </div> 
); 
} 

그 카드 목록을 제공해야하며 각 카드는 개별적으로 드래그 할 수 있습니다.