Allied ArchitectsAllied ArchitectsEngineer Blog

ウェブ開発におけるDrag/Dropについて

2017/11/8 JavaScriptフレームワーク

はじめに

はじめまして!ADUシステムのトゥオンと申します。

現在沢山のウェブサイトがDrag/Dropを使っています。Drag/Dropを使う時、対象の変更を見やすいし、理解しやすいです。例えば、 タスク管理のウェブサイトやスケジュール管理のウェブサイトなどです。

最近、要件定義のため、いくつかMockUp HTMLを作りました。その時に、Drag/Drop(ドラッグ&ドロップ)を触る機会がありまて、すごく面白いと思いましたので、今回Drag/Dropについて、話させていただきたいと思います。

Drag/Drop HTML5

HTML5を発表する時に、Drag/DropのAPIが追加されましたので簡単な記述でドラッグ&ドロップの機能が扱えます。
Drag/Dropを利用したい場合、draggable="true"を付けるだけです。

HTML5サンプルコードを見てみましょう

結果はこんな感じです。

おまけ:HTML5にJSがサポートしたイベント

イベント 内容
dragstart ドラッグ開始時
drag ドラッグ中
dragend ドラッグ終了時
dragenter ドラッグしている要素がエリアに入った時
dragleave ドラッグしている要素がエリアから出た時
dragover ドラッグしている要素がエリア上に居る時
drop ドロップ中

Drag/Drop JSライブラリ

HTML5がサポートしているDrag/Dropは簡単ですけど、もっと何かしら(アニメーションやイベントなど)が欲しがる場合、JavaScriptプラグインを利用できます。

  1. Dracula
    https://github.com/bevacqua/dragula
    https://bevacqua.github.io/dragula/
  2. Dragster
    https://github.com/bensmithett/dragster
    https://bensmithett.github.io/dragster/

さいごに

Drag/Dropについての話はまだ少ないかかもしれませんが、興味があれば、触ってみてください。

以上です。

ページTOPへ