jquery-ui - CSS3トランジションを使用してソート可能なjQueryUIをアニメーション化する

Question

CSS3トランジション（またはその他の手段）を使用して、jQuery SortableをiOSでのリストの並べ替えのように動作させるにはどうすればよいですか？リストアイテムはドラッグ中にスムーズにアニメーション化されるため、ドラッグするとアイテムが邪魔になりませんか？

[これをFAQに変換し、これを理解したい人のために時間を節約するために編集する]

Answer 1

https://gist.github.com/801570は、 jQuerySortableを使用してドラッグをスムーズにアニメーション化する方法を示しています。ドラッグすると、アイテムが邪魔になりません。CSS3トランジションを使用しており、その効果はまさに私が探していたものでした。とてもかっこいい。

コードは次のとおりです。

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内の「change」関数を利用することで、上記のすべてを改善しました。これがコードです。以下のフィドルをチェックして、必要な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);
} });

ここで完全なコード例を見ることができます

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