Yoshihiro)Tweetドラッグ&ドロップAPIは、名前のとおり、ページ上のさまざまな要素をマウスでドラッグ&ドロップできるようにするための仕組みです。APIとを組み合わせることで、ブラウザに対してドロップしたファイルをそのままサーバーにアップロードできるようになるなど、よりデスクトップアプリ的な仕掛けを実装できるようになります。065:ドラッグアイコンをカスタマイズする仕掛けそのものは単純ですが、アプリの操作性を大きく変える可能性を持ったAPIと言えるでしょう。ドラッグ&ドロップAPIのブラウザごとの対応バージョンは、以下のとおりです。12以降*:draggable属性は10以降サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。059:特定の要素をドラッグ可能にするドラッグ&ドロップ機能を利用するには、まず「その要素がドラッグ可能である」ことを宣言しておく必要があります。ページ内の特定の要素をドラッグできるようにするには、対象の要素にグローバル属性であるdraggable属性を付与します。</html>図1:要素がマウスでドラッグ可能に(クリックで拡大)draggable属性には、true(ドラッグ可能)、false(ドラッグ不可)を指定してください。以下の要素については、デフォルトでドラッグ可能ですので、draggable属性を明示する必要はありません。要素にはdraggable属性を付与していないことが確認できます。逆に、これらの要素をドラッグ不可にする場合には、明示的にdraggable属性をfalseにセットしなければなりません。060:要素をドロップ可能にする要素をドラッグできるようにしただけでは、ほとんど意味がありません。一般的には、ドラッグした要素をどこかにドロップできるような仕組みを設ける必要があります。以下のサンプルは、画像をドラッグしてあらかじめ決められた領域にドロップし、移動させるための仕組みです。</html>図2:画像を指定の領域でドロップすると、画像を移動(クリックで拡大)ドラッグ&ドロップに関するイベントとしては、以下のようなものが用意されています。ドロップした最低限、ドラッグ&ドロップ機能を実装するには、この中からdragstart、dragover、dropイベントリスナーを準備する必要があります。dragstartイベントでドラッグ元要素を記録し、dragoverイベントでドラッグ中の処理を、dropイベントでドロップ時の操作を、それぞれ受け持つわけです。これらのイベントリスナーで中心となるのは、DataTransferオブジェクトです。イベントオブジェクトのdataTransferプロパティ経由でアクセスできます。DataTransferオブジェクトは、ドラッグ&ドロップ時にやりとりするデータを管理するオブジェクトで、以下のようなメンバーを公開しています。ドロップ領域で許可される操作まず、(1)のdragstartイベントリスナーでは、ドラッグした要素のid値を保存しておきます。この値を(2)のdropイベントリスナーで取り出し、これをキーにドラッグ元要素を操作しています(ここではドラッグ元要素をドラッグ領域の子要素として追加します)。引数keyには、テキスト情報の場合は「text」を、URL/ファイルリストの場合には「url」のいずれかを指定します。(3)のdragoverイベントリスナーでpreventDefaultメソッドを呼び出しているのは、デフォルトの動作ではブラウザ標準の挙動が優先されてしまい、ドロップ操作が拒否されてしまうからです。そのため、ここで明示的にブラウザの挙動をキャンセルしておきます。WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。誠にありがとうございます。下記日程にて、メンテナンスを行います。ご理解いただけますよう、お願い申し上げます。状況により前後する場合がございます。※上記以外の会員機能(サイトへのログインなど)はご利用いただけます。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。