Éléments de tri ReactDnD ne se mettant pas à jour lors du glissement

Question

Bonjour, je suis ce code à partir de ce example pour créer un composant similaire. Mon composant fonctionne comme prévu (il est correctement trié par glisser-déposer) mais lorsque je fais glisser la carte, l'opacité 0 doit suivre l'élément glisser pour "sentir" qui fonctionne comme dans l'exemple ReactDnD.

Voir ma work

et mon code

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactDnDBackend = require('react-dnd-html5-backend'); 
var DragDropContext = require('react-dnd').DragDropContext; 
var DragSource = require('react-dnd').DragSource; 
var DropTarget = require('react-dnd').DropTarget; 

var Card = React.createClass({ 
    render: function() { 
     var connectDragSource = this.props.connectDragSource; 
     var isDragging = this.props.isDragging; 
     var connectDropTarget = this.props.connectDropTarget; 

     return connectDragSource(connectDropTarget(
      <div style={{ 
       marginBottom: '5px', 
       background: '#fff', 
       border: '1px dashed #ccc', 
       padding: '10px 16px', 
       opacity: isDragging ? 0.5 : 1, 
      }}> 
       {this.props.name} 
      </div> 
     )); 
    } 
}); 

var Source = { 
    beginDrag: function (props) { 
     return { 
      name: props.name, 
      index: props.index 
     }; 
    } 
}; 

Card = DragSource('CARD', Source, function (connect, monitor) { 
    return { 
     connectDragSource: connect.dragSource(), 
     isDragging: monitor.isDragging() 
    }; 
})(Card); 


var Target = { 
    hover: function (props, monitor, component) { 
     var dragIndex = monitor.getItem().index, 
      hoverIndex = props.index; 
     if (dragIndex === hoverIndex) { 
      return; 
     } 

     var hoverBoundingRect = ReactDOM.findDOMNode(component).getBoundingClientRect(), 
      hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top)/2, 
      clientOffset = monitor.getClientOffset(), 
      hoverClientY = clientOffset.y - hoverBoundingRect.top; 


     if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { 
      return; 
     } 

     if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { 
      return; 
     } 

     props.moveItem(dragIndex, hoverIndex); 

     monitor.getItem().index = hoverIndex; 
    } 
}; 

Card = DropTarget('CARD', Target, function (connect) { 
    return { 
     connectDropTarget: connect.dropTarget() 
    }; 
})(Card); 

var Container = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [ 
       {id: 1, name: 'Item 1', order: 0, bg: '#b5b5b5'}, 
       {id: 4, name: 'Item 4', order: 1, bg: 'red'}, 
       {id: 2, name: 'Item 2', order: 2, bg: 'blue'}, 
       {id: 3, name: 'Item 3', order: 3, bg: 'green'}, 

       {id: 5, name: 'Item 5', order: 4, bg: '#b5b5b5'}, 
       {id: 8, name: 'Item 8', order: 5, bg: 'red'}, 
       {id: 6, name: 'Item 6', order: 6, bg: 'blue'}, 
       {id: 7, name: 'Item 7', order: 7, bg: 'green'}, 
      ] 
     }; 
    }, 
    moveItem(dragIndex, hoverIndex) { 
     var items = this.state.items.slice(0), 
      dragItem = items[dragIndex]; 

     items.splice(dragIndex, 1); 
     items.splice(hoverIndex, 0, dragItem); 

     this.setState({ 
      items: items 
     }); 
    }, 
    render: function() { 
     var self = this; 

     return (
      <div style={{ 
       width: '600px' 
      }}> 
       {this.state.items.map(function (card, i) { 
        return (
         <Card 
          key={i} 
          index={i} 
          name={card.name} 
          moveItem={self.moveItem} 
         /> 
        ); 
       })} 
      </div> 
     ); 
    } 
}); 
Container = DragDropContext(ReactDnDBackend)(Container); 

ReactDOM.render(
    <Container />, 
    document.getElementById('app') 
); 

Answer 1

Ok vous avez besoin de quelques changements dans votre code:

1.- Dans ce cas, la propriété clé doit être associée à " card.id ", car si vous changez la commande, React veut savoir quel élément mettre à jour.

render: function() { 
    var self = this; 

    return (
     <div style={{ 
      width: '600px' 
     }}> 
      {this.state.items.map(function (card, i) { 
      return (
       <Card 
        key={card.id} 
        index={i} 
        name={card.name} 
        moveItem={self.moveItem} 
       /> 
      ); 
      })} 
     </div> 
    ); 
    } 

2.- Pour travailler de la même manière que l'exemple, l'opacité doit être: 0 ou 1

var Card = React.createClass({ 
    render: function() { 
    var connectDragSource = this.props.connectDragSource; 
    var isDragging = this.props.isDragging; 
    var connectDropTarget = this.props.connectDropTarget; 

    return connectDragSource(connectDropTarget(
     <div style={{ 
      marginBottom: '5px', 
      background: '#fff', 
      border: '1px dashed #ccc', 
      padding: '10px 16px', 
      opacity: isDragging ? 0 : 1, 
     }}> 
      {this.props.name} 
     </div> 
    )); 
    } 
});