React-beautiful-dnd: Support onMove hook

[ndelage]

Bug or feature request?

Feature request

Context: We're building a nested list so elements can not only move up & down, but left or right (to become a new parents or child).

We want to provide a visual indication while an item is moved (i.e. before onDragEnd) so we can update the UI to indicate if they'll create a child or parent element.

Feature: It's be helpful if the library would support an onMove callback in addition to onDragStart and onDragEnd, e.g.

  // fire-hooks.js

  if (currentPhase === previousPhase) {
    onMove({ current: current, previous: previous });
    return;
  }

[alexreardon]

You know what is dragging: onDragStart and you know what Droppable the Draggable is currently over by looking at the change in snapshot.isDraggingOver. That should give you the information you are after. A hook would be a little cleaner - but i am not sure if this use case is general enough

[alexreardon]

I will close this due to inactivity, but please feel free to continue this conversation if my previous answer is not sufficient

[markhomoki]

This would be nice to have as well. @ndelage Did you find a solution for this?

My use case is pretty much the same. Having a nest list where users can move items up and down but also interact on the x-axis to indicate the level of the indentation. All the custom code and checks required for this project done via onDragEnd callback except this x-axis one. The only way I could check if the user is moving an item left or right is via getItemStyle function but in this method I cannot override the onEnd state.

Could you give some idea what is the best way to check the current left/right position of an item? I couldn't find any relevant hook from your code.

Thank you!

[Morpheu5]

Any updates on this? My use case is similar but does not require the creation of a hierarchy. I have a list of items with an indentation key. I can do the indentation visually via CSS but I can't find a way of detecting whether the item is being dragged past a certain x threshold. @markhomoki do you have a (partial) solution?