search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.35k stars 2.56k forks source link

custom drop animation outside of <Droppable/> #2039

Open jonathan-baernthaler opened 3 years ago

jonathan-baernthaler commented 3 years ago

Expected behavior

TodoApp_delete_task

When the Task Item is dragged outside of the droppable it should change to a delete icon. And if released be deleted.

Actual behavior

When released the Icon changes back to the Task snapshot for a milli-second before disappearing. And creates some sort of flickering. Pls feel free to try it @ https://jonathan-baernthaler.github.io/TodoApp/

Steps to reproduce

This was done using a custom function and the className property of React on the draggable. The function checks if the snapshot isDragging and draggingOver and applies either a dragStyle or dropOutsideStyle.

Suggested solution?

I am not sure if my solution is the best to handle this problem in the first place. If there is a better way to create this functionality please let me know

What version of React are you using?

"react": "^17.0.1"

What version of react-beautiful-dnd are you running?

"react-beautiful-dnd": "^13.0.0",

What browser are you using?

Google Chrome

rlingineni commented 3 years ago

I was looking at your code, since I'm trying to set up something similar.

Looks like you load the image via URL. Try loading from a b64 string instead.

This might also help: https://github.com/atlassian/react-beautiful-dnd/blob/ec06fa266e1617cab2402e0613b36d88b9547f7f/docs/guides/avoiding-image-flickering.md

jonathan-baernthaler commented 3 years ago

thanks for the link! I tried it but it didn't solve the problem.

It happens when the task is released and the custom image disappears. So I assume the issue is not loading time but rather the animation itself.

could you solve it yourself? And how did you implement it?