Skip to content
New issue

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

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

Already on GitHub? Sign in 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
`

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

No branches or pull requests

1 participant