jQueryUIのアニメーション化CSS3トランジションを使用した並べ替え

Question

jQuery Sortableは、リストアイテムがドラッグ中にスムーズにアニメーション表示されるように、リストの並べ替えのようにCSS3トランジション（または他の手段）を使用することができます。あなたがドラッグするように？

[FAQにこれをオンにし、これを理解したい他の誰のための時間を節約する編集]

Answer 1

https://gist.github.com/801570がスムーズjQuery Sortableを使用してドラッグするアニメーション化する方法を示しています。あなたがドラッグすると、アイテムは途中で飛び出します。それはCSS3 Transitionsを使用し、効果は私が探していたものでした。とてもかっこいい。

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

スクリプト：

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

私は、ソート可能なAPI内で「変更」機能を利用することにより、上記のすべてに改善しました。これがコードです。下のフィドルをチェックして、必要なCSSを確認してください。

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

あなたがここにhere

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