DFlex
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。
他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。
CLS
CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。
そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとして設計、開発されているそうです。DOM要素は実際に並べ替えられずに、「変換」されており、影響を受けた要素のみが操作されるそうで、これにより大量の要素にも対応可能でレイアウトシフトなどの副作用等も最小限に抑えられるのだそう。実際にDevtoolsで確認しながら操作しましたが順序は変わっておらず、表示のみ変わったように見せているようでした。
開発しているアプリで、仕様上実際に要素を並べ替えられる必要がある場合はDFlexは利用できない、という事になりそうです。DFlexはGPLライセンスのもと、OSSとしてソースコードが公開されていますが、バグ修正やアップデートのサポート等の有償プランも用意されています。
