リストを並べ替えたいのですが、現在、各アイテムにボタンを付けてリストを上下に移動しています。アイテムをスムーズに動かしたいng-animate
のですが、アニメーションしか見つかりません-move
。それは、場所を切り替えている2つの一番上の要素でしか機能しないようです。私はそれを正しく見ることができません。これが私がこれまでに持っているものです:フィドル
.person-move {
transition: all 0.5s;
position: relative;
height: 0;
}
.person-move.person-move-active {
height: 26px;
overflow: hidden;
}
の目的がよくわからないと思い-move
ます。2人の場所を入れ替えているのですが、上の方にしか影響がないようです。それらが交換されているように見せたいです。サンプル フィドルには、既存のオブジェクトを移動して -enter と -leave する代わりに、新しいオブジェクトを作成するためのチェックボックスがあります。おそらく、2 つの方法を組み合わせることができます。
-move
上の人 (以前は下にいた人) に使用し、相対的な位置を上向きにアニメートします-enter
新しいオブジェクトを作成し、相対的な位置をアニメーション化することにより、下の人に使用します
これを行うためのより簡単またはより良い方法はありますか?
その他の考え: jquery-ui のドラッグ アンド ドロップのようなものがあればいいのですが、それを含めて、AngularJS で動作させることができるかどうかを調べる必要はありません。