1

我希望能够在两个卡片列表之间拖放。

基于简单的可排序示例，我成功地构建了两个带有卡片的列表并在它们之间拖放。

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

这个片段展示了我的问题：

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>

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

4

1 回答 1

0

决定你想在哪里处理掉落。
现在您正在处理在单独卡片悬停时添加卡片逻辑。
拖放也不适用于非空列表，如果您不是将它放在项目上，而是放在项目下的空白空间上。

于 2016-09-03T16:51:23.507 回答