HTML5で追加されたAPIの一つ、ドラッグ&ドロップはWebアプリケーションをよりローカルアプリケーションのように使えるようにするAPIです。主なターゲットはデスクトップのようですが、タブレットやスマートフォンも業務利用が増えています。 そこで使ってみて欲しいのがmobile-drag-dropです。モバイル向けにドラッグ&ドロップAPIを最適化しています。

mobile-drag-dropの使い方

デモです。リストを左側にあるDOMにドラッグします。

重なると写真に色がつきます。

インプットなどもちゃんとドラッグできます。

スマートフォンやタブレットの場合、ドラッグではなくタッチスタートを使って制御する必要があります。さらに指が離れたタイミングでちゃんと開放されないといけません。そうしたデスクトップとの差を吸収することでmobile-drag-dropはごく自然なドラッグ&ドロップを実現しているようです。

mobile-drag-dropはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

mobile-drag-drop demo timruffles/mobile-drag-drop: A drop-in shim to allow you to use existing html5 drag’n’drop code with mobile browsers