スマートフォンアプリではリスト表示がよく使われています。多数の情報を一覧で表示する際に便利です。同様の表示をデスクトップ向けのWebサイトでも使いたいと思ったことはないでしょうか。 そこでお勧めなのがSlip.jsです。リスト表示に加えてスワイプ、ドラッグによる並び替えもサポートしたUIライブラリです。

Slip.jsの使い方

スワイプの例です。マウスを放すと元に戻ります。

並び替えは少しの間ホールドすると有効になります。

スワイプで削除することもできます。

Slip.jsはシンプルなライブラリで、スワイプ操作を実現してくれます。さらにCSSと組み合わせることでリストの形状も自由に変更できます。デスクトップではあまりない操作ですが、スマートフォンやタブレットで慣れた操作なのですぐに習得できるでしょう。

Slip.jsはJavaScript製のオープンソース・ソフトウェア（2-clause BSD lisence）です。

Slip.js — sortable and swipeable views kornelski/slip: Slip.js — UI library for manipulating lists via swipe and drag gestures