ReactDnD sorting elements not updating on Dragging

Question

Hello i am following this code from this example to make a similar component. My component is working as i expected (it is sorting correctly when drag and drop) but when i am dragging the card the opacity 0 must follow the dragging element to "feel" that is working like in the ReactDnD example.

See my work

and my 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 you need a couple of changes in your code:

1.- In this case the key property must be associated with "card.id", because if you change the order React wants to know which element to update.

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.- To work in the same way as the example, the opacity must be: 0 or 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>
    ));
  }
});