Extra information while dragging

[alexreardon]

Right now we do provide all of the information you need to know exactly what is going on during a drag.

• onDragStart: what is dragging (draggableId)
• DroppableStateSnapshot > isDraggingOver: what is being dragged over
• DraggableStateSnapshot > isDragging: which item is dragging from within.

While it is possible to pass this information around a system it can be cumbersome to know a few things like:

• From a Droppable - what item is currently dragging over me? (not just that something is dragging over me)
• From a Draggable - am I dragging over a droppable - if so, what one?
• At an application level - what is going on? Right now you would need to publish isDraggingOver and isDragging changes

Additionally, providing this information around can hurt performance as it most likely relies on calling render() to pass props to things

Proposal

Exact names and shapes TBC

1. Add some new information to DroppableStateSnapshot:

Add details about what draggable is currently dragging over it.

export type StateSnapshot = {|
  isDraggingOver: boolean,
+  draggingOver: ?draggableId,
|}

Alternative - just swap from boolean

export type StateSnapshot = {|
-   isDraggingOver: boolean,
+  isDraggingOver: ?draggableId,
|}

2. Add some new information to DraggableStateSnapshot:

Provide information about what Droppable is being dragged over by the Draggable

export type StateSnapshot = {|
 isDragging: boolean,
+ isDraggingOver: ?droppableId
|}

3. Add a new system hook: onDragMove

+ onDragMove: (update: DragUpdate) => void

+ export type DragUpdate = {|
+  draggableId: DraggableId,
+  type: TypeId,
+  source: DraggableLocation,
+  // this contains the droppableId, and index of the item being dragged over
+  destination: ?DraggableLocation
+ |}

Relevant issues: #287 #144 (there are probably more also!)

[alexreardon]

The new hook is a little scary as I would not want to hurt drag performance which could be caused by heavy processing in an onMove hook.

Whether or not we call it on every drag update (60fps) is still to be thought about. I think it reasonable that it can be called whenever the destination changes in some way

[twiggler]

How about extending DroppableStateSnapshot with a isDragging field?

I have run into well-known bugs on mobile Safari involving -webkit-overflow-scrolling: touch; when dragging draggables to another droppable, they are clipped when they leave their current droppable. I was able to work around this rendering issue by setting -webkit-overflow-scrolling: touch to auto when dragging . However, pushing dragging state to the droppable is cumbersome . I cannot rely on isDraggingOver, because the draggable could be in no man's land between two droppables.

[alexreardon]

@twiggler I am not sure of the bug you speak of. Can you please create another issue to describe it in more detail? I am keen to avoid getting sidetracked in this issue

[twiggler]

I will not create a separate issue, because the clipping is not an issue with react-beautiful-dnd, but with iOS Safari.

The reference to the clipping problem was solely ment as a motivation for extending DroppableStateSnapshot with an isDragging field.