Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

strange begin drag error. #18

Open
BobWalsh opened this issue Jun 11, 2016 · 0 comments
Open

strange begin drag error. #18

BobWalsh opened this issue Jun 11, 2016 · 0 comments

Comments

@BobWalsh
Copy link

I'm getting the following error:

Uncaught Invariant Violation: Expected the drop target specification to only have some of the following keys: canDrop, hover, drop. Instead received a specification with an unexpected "beginDrag" key. Read more: http://gaearon.github.io/react-dnd/docs-drop-target.html

Here's my relevant code (I call card, kanban_deck):

**kanban_deck.es6.jsx:
import React, { Component, PropTypes } from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import constants from './constants';

const deckDragSpec = {
beginDrag(props) {
return {
id: props.id,
status: props.status
};
},
endDrag(props) {
props.deckCallbacks.persistDeckDrag(props.id, props.status);
}
}

const deckDropSpec = {
hover(props, monitor) {
const draggedId = monitor.getItem().id;
props.deckCallbacks.updatePosition(draggedId, props.id);
}
}

let collectDrag = (connect, monitor) => {
return {
connectDragSource: connect.dragSource()
};
}

let collectDrop = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
};
}

class KanbanDeck extends Component {
constructor() {
super(...arguments);
this.state = {
showDetails: false
};
// var str = JSON.stringify(this.props, null, 4);
// console.log(str);
}

render() {
const { connectDragSource, connectDropTarget } = this.props;

let tags = this.props.tags.map((tag) => {
  return <button 
                key={tag.id}
                className={tag.hexcolor + " btn btn-xs btn-pill pull-right"}
              >
              {tag.name}
            </button>
});
return connectDropTarget(connectDragSource(
  <div className="deck">
    <div className='deck-title' >
      <h3>{this.props.name}
        <span className="kb-badge btn-xs btn-default-outline pull-right">9</span>
      </h3>
      <div className="deck-details">
          {this.props.description}
      </div>
      {tags}
    </div>

  </div>
));

}
}
KanbanDeck.propTypes = {
id: PropTypes.number,
name: PropTypes.string,
description: PropTypes.string,
color: PropTypes.string,
deckCallbacks: PropTypes.object,
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired
};

const dragHighOrderDeck = DragSource(constants.KANBANDECK, deckDragSpec, collectDrag)(KanbanDeck);
const dragDropHighOrderDeck = DropTarget(constants.KANBANDECK, deckDragSpec, collectDrop)(dragHighOrderDeck);
export default dragDropHighOrderDeck

teee
`

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant