Selecto.js - Web上でドラッグで選択するUXを実現

Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。

今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。

Selecto.jsの使い方

下にあるタイルが選択された状態です。

マウスでドラッグして選択できます。

キーボードとの組み合わせで複数回の選択もできます。

選択してドラッグ移動といった使い方もできます。

Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.jsが使えそうです。

Selecto.jsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。