How to animate transformed component between rerender? - javascript

I am trying to animate my components after they are dropped into a new position. I use react-beautiful-dnd for drag and drop.
sandbox example for this situation
Here you can see, that when I drag one element from one list and drop to another list, that dropped item first drops to the last position of the list, and after that, it goes directly to the first position of the droppable list.
When dropping, it is dropped by using transition, but after pushing it to first position (here react does rerender), it only updates the view without animating (i know that it is normal behavior). I tried to add a transition to those elements, but that didn't help me.
Is there any way to achieve that?

Related

Extra area is picked in drag image while dragging an element

I was trying to implement Drag and Drop in one of my project using HTML's default API. I have completed the implementation but now I am facing the issue that an extra area is also picked in the DraggedImage other than the element. I have attached the image here for reference. The area highlighted by the black pen is the extra one (the image is the element that I want to drag).
I have tried to search a lot, but didn't find any relevant resource for getting rid of this.
One method that I can think of is cloning the dragged element on drag start and deleting the cloned after drop. But I think this will not be ideal as the dragged element can be more complex.

How can I prevent multiple items from being dragged using draggable in JS?

I'm implementing a drag and drop system in JavaScript. It works great but I have noticed that, sometimes, multiple items get dragged and dropped (see picture below). Is there any way I can prevent this from happening and constrain it so only one item can be dragged and dropped at a time?

Change item height in famous-flex list

I have a list in a FlexScrollView.
I'm selecting an item in the list according to some logic, and I need the selected item to expand. Since a change in height won't be noticed by famo.us I'm looking for a way to make it work. Any ideas?
So far I have tried a css transition that occurs when the selected surface gets selected, but of course this doesn't change the position of the other items because of how famo.us works.
I also tried to add a StateModifier as a datasource (wrapped with RenderNode) instead of directly adding the surface. I then tried to make the transition happen via the StateModifier I created but it doesn't seem to move the surface at all, even the completion function of setTransform isn't being called.
Update:
I managed to get the item to animate via the RenderNode, but the other items stay put and get drawn over by my expanding item. Added the question to famous-flex github page https://github.com/IjzerenHein/famous-flex/issues/53.
Solved it by using setSize animation instead of setTransform. For some reason my eyes insisted that the docs don't say anything about animating size.

Animation take place during drag

I have an element that is draggable using jQuery UI's .draggable(), but I want it to follow a certain path while dragging.
In fact, while it is being dragged the whole layout of the page will be changing.
Since I have one set of styles for how the page looks like before the drag and one set of styles of how the page looks like after the drag is done, I figured using a CSS animation would make sense.
So, now, my question is how can I make that animation occur as the drag is happening?
Or if there is another way to do this then an animation, how can I transition from one style to another as a drag is happening.
What I'm trying to do is get the draggable element to drag into its place in the second styles.

How do I copy GMail's drag and drop labeling function?

In a web application I am making I want to create the same effect that GMail has for dragging and dropping labels and conversations.
Basically I want to be able to make an ondrag function that attaches a "new" html element to the cursor, and upon releasing it over certain elements I want to execute my given functionality that is aware of both the dragged element and the element over which the drop occured.
I don't want to move any elements around. I want to make a function that let's the original elements stay in place and only react to the dragging of some new element.
How can this be done?
you mean something like this : http://www.finrik.at/temp/drag_drop/index.html
here is the how to. and you'll need jQuery plgin (www.jquery.com)

Categories