Animazione di jQueryUI Ordinabile utilizzando le transizioni CSS3

Question

Come posso utilizzare le transizioni CSS3 (o qualsiasi altro mezzo) per fare un jQuery Sortable più simile alla lista che riordina in iOS, dove le voci di elenco si animano senza intoppi durante il trascinamento, quindi gli elementi escono dal come trascini?

[modifica di trasformare questo in una FAQ e risparmiare tempo per chiunque altro che voglia di conoscere questo]

Answer 1

https://gist.github.com/801570 mostra come animare agevolmente trascinando con jQuery Sortable. Gli oggetti si allontanano velocemente mentre trascini. Usa CSS3 Transitions e l'effetto era esattamente quello che sto cercando. Molto bello

Ecco il codice:

JSFIDDLE:

http://jsfiddle.net/LTWMp/

HTML:

<style name="impostor_size"> 
    .marker + li { border-top-width:0px; } 
</style> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
</ul> 

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'})); 
    } 
}); 

Answer 2

ho migliorato tutto quanto sopra sfruttando la funzione di 'cambiamento' all'interno della api ordinabile. Questo è il codice. Controlla il violino qui sotto per vedere il css richiesto.

$('ul').sortable({ 
placeholder:'marker', 
distance: 15, 
cursor: 'move', 
revert: 200, 
start:function(ev, ui) { 
    $(".marker").css({"height": "0px"}); 
    console.log("start"); 
}, 
change:function(ev, ui) { 
    $(".marker").css({"height": "0px"}); 
    setTimeout(function(){ 
     $(".marker").css({"height": "40px"}); 
    },10); 
} }); 

Si può vedere l'esempio di codice completo here

http://jsfiddle.net/LTWMp/284/