Skip to content

strange begin drag error. #18

@BobWalsh

Description

@BobWalsh

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
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions