JQuery sortable animation?

Question

I am creating a small CMS and working with a sortable function for the first time. Pretty interesting and flexible. I have only one problem: everything works fine as I want, except for drag and drop animation.

If I'm not trying to use animation in any of the sorting events, that’s fine, and the tiles fit perfectly into the spots, but I would love to bring it to life (just like renaming the iPhone icon). I know this has something to do with the ui.placeholder and ui.helper elements and one of the change / sort / etc events, but I can't get it to work.

Here, where I am, that works is that as soon as I move to a new place, the freed space comes to life (rather than being tied), but I can not simultaneously revive the new space to show, and my grid essentially folds to one tile.

UPDATE:

Here's a simple fiddle with my main list of html layouts and the behavior currently best I can do this:

-> jQuery sorting sort

The only thing I want is that the unselected blocks are expecting their new positions, and not tied. This is strange since the authors recognized the need for this option with the element you are dragging (return the speed option to init), but not everything else. I tried to use many show / hide animation combinations for ui.helper / ui.placeholder elements with varying degrees of success. My problem is not entirely clear when and where these objects are, so the animations were uncomfortable at best.

Answer 1

The party is late, but I just finished an implementation that includes animations of sorts that are not currently being dragged when the user drags it. I found that this topic helped very little, so I thought that I could work out a solution.

You can check it out here:

jQuery Sort with animation

Answer 2

The problem here is generally possible if .sortable() used with relative positioning, especially with the float specified by css.

Another solution that can be implemented by parallelizing the animation by separating jQuery Drag and drop animations and CSS3 Transitions, because of this, are still implemented in the same technologies ... with the exception of positioning.

But then you need to make a separate script to set the initial absolute positions to the value of the elements, it can be JavaScript, initial css or jQuery .css()

 //and sure recompose css //by add position:absolute //and remove float:left 

Good luck! :)