0

I'm using react-dnd. I want to know if the currently hovered target is before or after the dragged source in an ordered list of dnd dom objects and pass this to the dom object as a css class. I want to be able to compare props between source and target for my own custom functions.

How can I create custom source-target-relation functions (like isOver, canDrop, etc)? I want to create a isBeforeDraggedSource() function.

user1204800
  • 46
  • 1
  • 6

1 Answers1

0

Other than forking the library I don't think you can create custom relations like that, but you could modify the collect function to create your own relation. could be something like

static collect = (connect, monitor) => {
  return {
    isBeforeDraggedSource: <my function>    
  }
}

You can then get the currently dragged item with monitor.getItem(), compare it against the props and go from there. And if you want the currently dragged item's props, just pass them in as part of the dragged item. Conversely you could just pass getItem through the collect and then use that inside of render to compare it's props against the current objects props.

Ben Hare
  • 4,365
  • 5
  • 27
  • 44
  • Thanks for looking at this. I tried that and monitor.getItem() in the collect function returns null, is this a bug? I can't find anyway to have access to both source and target props inside the render function. – user1204800 May 26 '16 at 16:46
  • Do you have a beginDrag function in the DragSource of the thing being dragged? That's where you can specify an item that you can then get with the monitor.getItem (and where I was suggesting you pass through whichever part of the props you like). Check out what's provided here: https://gaearon.github.io/react-dnd/docs-drag-source.html and here: https://gaearon.github.io/react-dnd/docs-drop-target-monitor.html – Ben Hare May 26 '16 at 18:35
  • Thanks for pointing me in the right direction. It turns out monitor.getItem() returns null for me, but inside of beginDrag(props,monitor,component) component.props has what i was looking for. I overlooked this because the example only included beginDrag(props). Thanks! – user1204800 May 27 '16 at 16:29
  • ... nevermind, still stuck. I guess my beginDrag() has never been returning props correctly, not able to pass anything from beginDrag to the render function , will try to put up code if I have time. – user1204800 May 27 '16 at 16:40
  • Add something to your beginDrag like `beginDrag(props, monitor, component) { return { element: props. } }` And it'll be available in monitor.getItem() in the collect function of the drop target – Ben Hare May 27 '16 at 21:14
  • Excellent! Got it working. Thanks so much for your help. – user1204800 May 30 '16 at 19:18