API(1)2014/08/29atsuko.aツイートこんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)夏が終わりそうですね・・・今年はまだスイカ食べてないのに・・・さて今回のブログからしばらく、HTML5で追加されたAPIで遊んでみようと思います。今回はひとまず動かすところまで。Interfaceの略なのですが、まぁ簡単に言うと便利機能をいろんなところで使いまわせるようにしたセットみたいなものです。APIなど、多岐に渡ります。そんな素敵なAPIですがHTML5の策定に併せていい感じの動き(機能)を実装できるようにAPI使えるようにしようぜ!と幾つかのAPIが追加されたのでした。API」と呼ばれるようです。APIを触ってみます。APIについてざざっとまとめます。できることと対応ブラウザまぁ、読んで字の如く要素のドラッグ&ドロップができます。掴んで、移動(ドラッグ)してどこかで離す(ドロップ)という動作を制御しているので、軌道や過程よりもどこからどこまでなのかを大事にするようです。具体的には7つのイベントを持っています。場合によるどう使うかは後述しますが、これらを利用するとサービスの管理画面やその他のAPIと組み合わせてドラッグ&ドロップによるファイルのアップロード等が簡単に実装できるようになります。12.0~IEさんに関しては、5.5から独自実装されているのでIE7/8でも使えないことも無いようです。書き方が異なるので今回は触れません。基本的にはほぼすべての要素をドラッグ&ドロップできます。※以降にあるデモは古いIEさんとfirefoxさんでは挙動がちょっとおかしなことになります。ドラッグ編ドラッグさせたい要素に、HTMLタグの属性を追加してあげましょう。a,等)はコレを追加することでドラッグを無効にすることもできます。draggable="false">(ΦωΦ)<ドラッグできないよ!</span>(ΦωΦ)<ドラッグできるよ!(ΦωΦ)<ドラッグできないよ!上の(ΦωΦ)はドラッグできますが、下の(ΦωΦ)はドラッグできませんね?(正確にはドラッグできるのは<span>ですが)これだけではつまらないしよくわからないので、↑で紹介したイベントを絡めてみましょう。(面倒なのでjQueryを使用します。)ドラッグしたら何かするその1(ΦωΦ)<ドラッグしてね!文字が太くなりつつ赤くなりましたね。true);});cat1というIDという要素を取得して、それに対してdragstartのイベントを設定していますね。イベントの中身で対象要素のCSSを変更しています。ドラッグしたら何かするその2(ΦωΦ)<ドラッグしてね!ドラッグ開始時の動きはその1と同じですが、ドラッグを終了した際にもCSSが変更になってますね。true);});その1と同じ要領でdragendのイベントを設定しています。ドロップ編ドラッグ&ドロップAPIなので、当然ドロップ時のイベントも指定したいですよね。ドロップされる側の要素にも属性を追加してあげます。ドラッグされるデータ元へのリンクがドロップされるが、現在dropzone属性をサポートしているブラウザはありません_(:3」∠)_では、どうするのかと言うと、こちらもJSで制御することになります。(正確には、ドロップ動作をdropzoneで制御しつつドロップされたアイテムの処理はJSで行います)将来的にdropzone属性のサポートが進めばドラッグ&ドロップの動作が更に簡単になりそうですね。テキストをドロップするドロップエリアを増やしてみました。(ΦωΦ)<ドラッグしてね!ここにドロップしてね!(ΦωΦ)を下のエリアにドラッグしていくと(ΦωΦ)が青くなります。true);});ドラッグ時と同じ要領で、ドロップ先の要素にdragenterのイベントを設定しています。dragenterの発生タイミングはドラッグ要素がドロップ要素に入った時なので(ΦωΦ)がドロップエリアに入った瞬間に青くなるのですね。こちらも動きが地味なので、他のイベントを絡めてみましょう。ドロップしたら何かするその1(ΦωΦ)<ドラッグしてね!ここにドロップしてね!なんと、(ΦωΦ)が移動してきました。areaElement=document.getElementById('area4');areaElement.addEventListener('dragenter',function(){$(catElement).prependTo($(areaElement));},true)});jQueryを使って、(ΦωΦ)要素をドロップエリアに移動しています。今回はいひとまずドラッグ&ドロップするところまでやってみました。次回はもうちょっと実用的な使い方をしてみたいと思います。jQueryこの記事を書いた人atsuko.aフロントエンドエンジニア猫派の甘党、胃が弱い系WEB屋。コーディングしたり、たまにデザインしたりします。