Change the look of <DragOverlay> as it is snapping back from being released

[pstrassmann]

When dragging a component and releasing it over a non-droppable area, the component snaps back to its original location. Is there a way to change the rendering of <DragOverlay> just in the time it is "snapping back"?

Example:

1. Click a draggable component that looks like style 1
2. Use a piece of state (activeId) to render a <DragOverlay> of style 2 when it is being dragged
3. Release the style 2 over a non droppable area
4. I'd like to: make the <DragOverlay> switch to looking like style 1 (the original component look) as it is snapping back.

Any ideas of how I might do this? Thanks so much!

[aroman]

@pstrassmann did you ever solve this? running into the same issue. strangely, it seems like DragOverlay doesn't re-render based on the result of state changes in the DndContext.onDragEnd callback

[pstrassmann]

@aroman See this section of the CHANGELOG for 'sideEffects' that can be applied during the drop animation. There are a number of really cool things you can do with this feature, although I would need to do more exploration to see how this could be integrated with state changes.

For example, to make the active invisible and the Drag Overlay semi-transparent during the drop animation, you can do the following:

const customDropAnimation: DropAnimationOptions = {
  duration: 250,
  easing: 'ease',
  keyframes: defaultDropAnimationKeyframes,
  sideEffects: defaultDropAnimationSideEffects({
    styles: {
      active: {
        opacity: '0',
      },
     dragOverlay: {
       opacity: '0.5' // set the dragOverlay opacity to 0.5 during the drop animation
     },
    },
  }),
};

<DragOverlay dropAnimation = { customDropAnimation } > ....

Hope this helps!

[beckaberhanu]

I haven't been able to find any documentation for how to use this sideEffects property. If it is described in more detail somewhere can you please point me to it?

[pstrassmann]

@beckaberhanu There are not docs on this that I'm aware of, other than what's in the changelog. I think your best bet at the moment is going to be to dig into the implementation of useDropAnimation.ts here how to see how sideEffects are typed and used