Question

我希望能够在两张卡片之间拖放。

基于简单的sortable example我已经成功构建了两张带有卡片的列表并在它们之间拖放。

出于某种原因，当其中一个列表完全为空时，我无法将卡放入其中。

此代码段演示了我的问题：

const ItemTypes = {
    CARD: 'card'
};

let cardSource = {
    beginDrag: function (props, monitor, component) {
        // Return the data describing the dragged item
        return {
            card: props.card,
            originalList: props.cardList,
            originalIndex: props.findCard(props.card).index,
            targetList: props.cardList // at first target is same as original
        }
    },

    endDrag: function (props, monitor, component) {
        let item = monitor.getItem();
        let dropResult = monitor.getDropResult();
        if (!monitor.didDrop()) {
            props.moveCard(item.card, item.originalIndex);
            if (item.targetList !== item.originalList) {
                item.targetList.removeCard(item.card);
            }
            return;
        }
    }
};

let cardTarget = {
    canDrop: function (props, monitor) {
        return true;
    },

    hover: function (props, monitor) {
        let item = monitor.getItem();

        if (item.targetList !== props.cardList) {
            item.targetList.removeCard(item.card);
            item.targetList = props.cardList;
        }

        if (item.card.id !== props.card.id) {
            let card = props.findCard(props.card);
            props.moveCard(item.card, card.index);
        }
    },

    drop: function (props, monitor, component) {
        return monitor.getItem();
    }
};


class CardElement extends React.Component {
    render() {
        let isDragging = this.props.isDragging;
        let connectDragSource = this.props.connectDragSource;
        let connectDropTarget = this.props.connectDropTarget;
        let opacity = isDragging ? 0 : 1; // Not working as expected

        let elm = <div className="card-item" style={{ opacity: opacity }}> Name: { this.props.card.name } id { this.props.card.id } </div>;
        return connectDragSource(connectDropTarget(elm));
    }
}

CardElement.propTypes = {
    connectDragSource: React.PropTypes.func.isRequired,
    connectDropTarget: React.PropTypes.func.isRequired,
    isDragging: React.PropTypes.bool.isRequired,
    card: React.PropTypes.object.isRequired,
    cardList: React.PropTypes.object.isRequired,
    moveCard: React.PropTypes.func.isRequired,
    findCard: React.PropTypes.func.isRequired
}

let cardDropTarget = ReactDnD.DropTarget(ItemTypes.CARD, cardTarget, function (connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget()
    }
})(CardElement);

let Card = ReactDnD.DragSource(ItemTypes.CARD, cardSource, function (connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    };
})(cardDropTarget);

let cardListTarget = {
    drop: function (props, monitor, component) { 
      // when the list empty the cards not dropping here
    },
    canDrop: function () {
        return true;
    }
};

class ListElement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cards: this.props.cards
        };
    }

    moveCard(card, atIndex) {
        let found = this.findCard(card);
        let cards = this.state.cards;

        if (found.card) {
            cards.splice(found.index, 1);
            cards.splice(atIndex, 0, found.card);
        } else {
            cards.splice(atIndex, 0, card);
        }
        this.setState({ cards: cards });
    }

    removeCard(card) {
        let found = this.findCard(card);
        let cards = this.state.cards;
        if (found.card) {
            cards.splice(found.index, 1);
        } else {
            // console.log('Can\'t remove card ' + card.id + ' - can\'t find it');
        }
        this.setState({ cards: cards });
    }

    findCard(card) {
        let index = this.state.cards.indexOf(card);
        if (index >= 0) {
            // console.log('found: card: ' + card + ' with id ' + card.id);
        } else {
            // console.log('didn\'t find card');
            card = null;
        }
        return {
            card: card,
            index: index
        };
    }

    render() {
        let connectDropTarget = this.props.connectDropTarget;

        let cardList = this.state.cards.map(card => {
            return <Card key={ card.id }
                card={ card }
                cardList={ this }
                moveCard={ this.moveCard.bind(this) }
                findCard={ this.findCard.bind(this) }
                />
        });

        return connectDropTarget(<div className="col"> {cardList} </div>);
    }
}

let List = ReactDnD.DropTarget(ItemTypes.CARD, cardListTarget, (connect, monitor) => {
    return {
        connectDropTarget: connect.dropTarget()
    }
})(ListElement);

class AppElement extends React.Component {
    constructor(props) {
        super(props);

        let listA = [
            { name: 'Harry', id: 1 },
            { name: 'Jimmy', id: 2 },
            { name: 'Jane', id: 3 },
            { name: 'Adam', id: 4 },
            { name: 'Judith', id: 5 }
        ]
        let listB = [
            { name: 'Edward', id: 6 },
            { name: 'Ronald', id: 7 },
            { name: 'Irene', id: 8 },
            { name: 'Patrick', id: 9 },
            { name: 'Dorothy', id: 10 }
        ]
        this.state = {
            cards: [listA, listB]
        }
    }
    render() {
        return <div id="warper">
            <List cards={ this.state.cards[0]} />
            <List cards={ this.state.cards[1]} />
        </div>;
    }
}
let App = ReactDnD.DragDropContext(ReactDnDHTML5Backend)(AppElement);

ReactDOM.render(<App/>, document.getElementById('app'));

#warper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: space-between;
  align-items: flex-start;
}
.col {
  width: 400px;
  margin: 5px 31px 0px 0px;
  min-height: 300px;
  border: 2px solid black;
  padding: 9px;
}
.card-item {
  border: 1px dashed gray;
  padding: 0.5rem 1rem;
  margin-bottom: .5rem;
  background-color: white;
  cursor: move;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
  <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
  <script src="https://npmcdn.com/react-dnd-html5-backend@2.1.2/dist/ReactDnDHTML5Backend.min.js"></script>
  <script src="https://npmcdn.com/react-dnd@2.1.4/dist/ReactDnD.min.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

当列表为空时，我无法弄清楚它是不是让我把卡放入其中。

Answer 1

决定你要处理的地方现在您正在处理在单独卡片悬停时添加卡片逻辑拖放不适用于非空列表，如果您不将其放在项目上，而是放在项目下的空白区域。

反应和DropTarget没有按预期工作

1 个答案: