私の Web アプリケーションのテーブルの一部は、次のコードを使用して、ドラッグ アンド ドロップで並べ替えることができます。
http://isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
これは、次のように、標準の JavaScript の insertBefore メソッドを使用して、テーブルを別の DOM 位置に移動します。
dragObject.parentNode.insertBefore(dragObject, currentRow.nextSibling);
正常に動作しますが、動きが急激に見えます。これを更新して、テーブルの行をドラッグすると、他の行が新しい位置にアニメーション化されるようにしたいと思います。これは、編集可能な表で表の行をドラッグしたときに iOS で発生するのと同じ効果です。
これは jQuery の仕事かもしれないと思ったので、コードを微調整して、標準の insertBefore メソッドを jQuery の insertBefore 関数に変更し、アニメーション化できると考えました。
jQuery(".dragging").insertBefore(currentRow.nextSibling)
しかし、さまざまなアニメーション オプションを試してみたところ、動いている行だけをアニメーション化でき、その周りの他の行はアニメーション化できないことに気付きました。
これに対する解決策を見た人はいますか? 基本的に HTML で iOS テーブルの並べ替えをシミュレートしていますか? コードを完全に変更する必要がないように、既存のテーブル行で動作するソリューションを希望しますが、必要に応じて div ベースのマークアップに変更することを検討します。