jQueryを使用してソートイベントをアニメーションで模倣する方法は？

Question

私はアイテムのリストを持っており、それぞれにチェックボックスがあります。チェックボックスをオンにすると、その項目がリストの先頭に並べ替えられ、マウスでドラッグされているかのようにアニメートされます（マウスカーソルは表示されません）。

これは可能ですか？私は過去にドラッグ可能な/並べ替え可能なイベントをトリガするのに苦労しました。私は別のソリューションにオープンしています、項目がどこに移動したのかは明らかです。

編集：私はもともとjQuery sortable（）リストでこれを行う方法を尋ねていましたが、明らかにそれを伝えていなかったので、すばらしい答えに合わせて質問を更新しました。

Answer 1

、このバイオリンは、他のものは彼らの正当な場所を取る前に、トップに到達するために、新たにチェックボックスを待ちません。代わりに、彼らはすべてを一緒にアニメーションを取得：

http://jsfiddle.net/ebiewener/Y5Mdt/1/

必要なCSSを与えることに属性をしながら、最終的には、それは、すべてのそれは他の行の上にスライドアップできるように、絶対位置を移動している行を与えることについてですそれらの他の行は、選択された行が文書フローから絶対位置付けで除去されたときに即座に外れないようにする。これが行われると、選択された行は絶対位置を失いますが、行の先頭に追加されます。これにより、すべてのcssが本質的に「リセット」されるので、新しい行の選択を進めることができます。

Answer 2

jQueryはtransferアニメーションを持っています。

クイックjsfiddleここに。

これを使用して並べ替えを行い、コールバックに実際のチェックボックスを移動することができます。 私はソートを行うためにチェックボックスのリストを使用するために家に帰るときにデモを更新します。

Answer 3

このフィドルを確認してください。 ここにはプラグインは使用されていません。

http://jsfiddle.net/bN8x6/

にもこの更新プログラムを確認してください。相対的な位置決めを使用します。したがって、アニメーション中にプレースホルダーが保持されます。 avetarmanの第二の例と同様に

http://jsfiddle.net/bN8x6/1/

Answer 4

これを試してください。ここ

$('#mytest li').click(function() { 
 
    var $this = $(this); 
 
    if ($this.children("input:checked")) { 
 
     $this.effect("transfer", { 
 
      to: $this.parent().find(":first-child") 
 
     }, 1000); 
 
     $this.remove(); 
 
     $(this).prependTo("#mytest"); 
 
    }  
 
});

.ui-effects-transfer { 
 
    border: 2px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> 
 
<ul id="mytest"> 
 
    <li><input type="checkbox" id="check1" /><label for="check1">One</label></li> 
 
    <li><input type="checkbox" id="check2" /><label for="check2">Two</label></li> 
 
    <li><input type="checkbox" id="check3" /><label for="check3">Three</label></li> 
 
    <li><input type="checkbox" id="check4" /><label for="check4">Four</label></li> 
 
    <li><input type="checkbox" id="check5" /><label for="check5">Five</label></li> 
 
    <li><input type="checkbox" id="check6" /><label for="check6">Six</label></li> 
 
    <li><input type="checkbox" id="check7" /><label for="check7">Seven</label></li> 
 
    <li><input type="checkbox" id="check8" /><label for="check8">Eight</label></li> 
 
    <li><input type="checkbox" id="check9" /><label for="check9">Nine</label></li> 
 
    <li><input type="checkbox" id="check10" /><label for="check10">Ten</label></li> 
 
</ul>

デモ：http://jsfiddle.net/naveen/gLBjt/

免責事項：これは、本質的に@redsquareソリューションのポートです。 :)