Sorry to possibly use this as more of a help forum, but despite great efforts I am unable to get any response from the DropTarget in this use case.
I am wanting to use a series of 'category cards' that can register drop events onto themselves.
Am I making any glaring screwups here?
I can confirm that the DragSource functions are working, but nothing I log from the DropTarget spec functions is making it to the console, it's like they totally aren't applied.
import React, { Component } from 'react'
import { DropTarget, DragSource } from 'react-dnd'
import _ from 'lodash'
export const ItemTypes = {
CATEGORY: 'category-item'
}
class CategoryTreeFork extends Component {
componentWillReceiveProps = (nextProps) => {
console.log("Next cat props", nextProps)
}
render(){
var { thisCat, childCat, level, dropEvent } = this.props
const { connectDragSource, connectDropTarget, isDragging, isOver } = this.props
return connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
)
}
}
/* get dragged */
const sourceSpec = {
beginDrag(props){
return { category_id: props.thisCat.category_id }
}
}
const sourceCollect = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}
}
/* get dragged onto */
const targetSpec = {
drop(props, monitor, component) {
const item = monitor.getItem()
console.log("me or my friend?", item)
},
hover(props, monitor, component){
console.log("yo what you hoverin there for homie?")
}
}
const targetCollect = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
}
}
export default _.flow([
DragSource(ItemTypes.CATEGORY, sourceSpec, sourceCollect),
DropTarget(ItemTypes.CATEGORY, targetSpec, targetCollect)
])(CategoryTreeFork)
DX nevermind, realized just after that I had forgotten to call connectDropTarget on the render. This is the fix:
return connectDropTarget(connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
This solved my problems just now. Followed the "simple", sortable example and did the double decorators, but didn't apply the connectDropTarget
for people coming from a search-engine, looking for a way to use DragSource and DropTarget on the same component without using _.flow
, this is how you do it:
export default
DragSource(typeA, specA, collectA)(
DropTarget(typeB, specB, collectB)(
Component));
Most helpful comment
for people coming from a search-engine, looking for a way to use DragSource and DropTarget on the same component without using
_.flow
, this is how you do it: