Selecto.js - Web上でドラッグで選択するUXを実現
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。
Selecto.jsの使い方
下にあるタイルが選択された状態です。
マウスでドラッグして選択できます。
キーボードとの組み合わせで複数回の選択もできます。
選択してドラッグ移動といった使い方もできます。
Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.jsが使えそうです。
Selecto.jsはTypeScript製のオープンソース・ソフトウェア(MIT License)です。
Selecto - Welcome ⋅ Storybook daybrush/selecto: Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.