开发者

jQuery sortable animation?

I'm building a small CMS and working with the sortable function for the first time. Pretty interesting and flexible. I'm having only one problem: Everything works great, just as I want, except for the animation while dragging.

If I don't try to use animation in any of the sorting events it's fine and the tiles snap into the spots fine, but I'd really like to animate this (much like an iPhone icon rearrange). 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 seem to quite get it working.

Here's where I am, which works in that once I move to a new spot the vacated space animates away (rather than snapping), but I can't seem to simultaneously animate the new space out to show and my grid essentially collapses by one tile.

UPDATE:

Here's a simple fiddle开发者_如何学Python with my basic html list layout and the behaviour currently the best I can make it:

-> jQuery sortable grid

The only thing I want is for the non-selected blocks to animate to their new positions, not snap. It's odd as the authors recognized the need for this option with the item you are dragging (revert speed option in init), but not the rest. I tried using lots of combinations of show/hide animations on the ui.helper/ui.placeholder elements with varying degrees of success. My issue is not really understanding when and where these objects are so the animations have been dodgy at best so far.


Quite late to the party, but I just finished an implementation that involves animating the sortables that aren't currently being dragged as the user drags that one. I found there was very little help on this topic, so I thought I'd get a solution going.

You can check it out here:

jQuery Sortable with animation


The problem here in general is possible in case that .sortable() is used with relative positioning especially with the float given by css.

Other solution which can be implemented through parallelize animations by separating
jQuery Dragging Animation and CSS3 Transitions, due to this is realized anyway in the same tech ... with exclusion of positioning.

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

//and sure recompose css
//by add
position:absolute  

//and remove
float:left

Good Luck! :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜