Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Animating jQueryUI Sortable using CSS3 transitions

Animating jQueryUI Sortable using CSS3 transitions

Problem

How can I use CSS3 transitions (or any other means) to make a jQuery Sortable act more like the list re-ordering in iOS, where list items smoothly animate while dragging, so items scurry out of the way as you drag?

[editing to turn this into an FAQ and save time for anyone else who wants to figure this out]

Problem courtesy of: Justin Grant

Solution

https://gist.github.com/801570 shows how to smoothly animate dragging using jQuery Sortable. Items scurry out of the way as you drag. It uses CSS3 Transitions and the effect was exactly what I am looking for. Very cool.

Here's the code:

JSFIDDLE:

http://jsfiddle.net/LTWMp/

HTML:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS:

body { color:white; font-family:Helvetica, sans-serif;  padding: 10px}
ul { float:left; width:300px; overflow:hidden; border-radius:6px; }
li { display:block; position:relative; padding:12px 6px; z-index:1; margin:5px 20px; }
li:after { background:#18629D; display:block; position:absolute; height:100%; width:100%; top:0px; left:0px; content:' '; border-radius:6px; z-index:-1; }
li { -moz-transition:border-top-width 0.1s ease-in; -webkit-transition:border-top-width 0.1s ease-in; border-top:0px solid rgba(0,0,0,0); }
.marker { opacity:0.0; }

Script:

var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
    rule.cssText = 'border-top-width: '+atHeight+'px'; 
};
$('ul').sortable({
    'placeholder':'marker',
    'start':function(ev, ui) {
        setPadding(ui.item.height());
    },
    'stop':function(ev, ui) {
        var next = ui.item.next();
        next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
        setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
    }
});
Solution courtesy of: Justin Grant

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Animating jQueryUI Sortable using CSS3 transitions

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×