Réagir DnD traîne toute la liste des cartes au lieu de la carte unique

Question

J'essaie d'utiliser réagissent DnD dans mon projet de réaction. Dans ma méthode render je définir une variable nommée Populate comme indiqué ci-dessous, qui retourne une liste de cartes comme celui-ci

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> 
       ) 
     }); 

Et mon retour de méthode render ressemble à ce

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

problème est lorsque je tente En utilisant le glisser, la liste entière des cartes est sélectionnée pour glisser. Je veux que toutes les cartes aient une fonctionnalité de glissement individuelle.

Answer 1

Si vous souhaitez que chaque carte ait une fonctionnalité de glissement, vous devez envelopper chaque carte dans un DragSource, et non la liste entière. Je diviser la carte en son propre composant, enveloppé dans un DragSource, comme ceci:

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

Ensuite, vous utiliserez cette DragContainer en rendre du composant de niveau supérieur comme celui-ci:

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> 
); 
} 

Ce devrait vous donner une liste de cartes, chacune pouvant être déplacée individuellement.