IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > Drag and Dropの使い方 > ドラッグ&ドロップで要素間でデータを受け渡すには
  カテゴリ別さくいん

ドラッグ&ドロップで要素間でデータを受け渡すには

ドラッグ&ドロップで要素間でデータを受け渡すには

解説

Drag and Drop APIでは、ドラッグ時に設定したデータを、ドロップ時に受け取ることができます。既定でドラッグ可能な、選択中の文字列リンク、画像の場合は、イベントハンドラ上書きされなければ、データの格納も自動で行われます。

まず、ドラッグ開始時に受け渡すデータを設定するにはondragstartイベントハンドラで以下のように記述します。ここではドラッグされる要素のid文字列で格納しています。

// sourceはドラッグされる要素
source.ondragstart = function(event){
   event.dataTransfer.setData("Text",event.target.id);
   event.dataTransfer.setData("text/plain",event.target.id); 
}

受け渡すデータを設定するには、引数のeventオブジェクトのdataTransfer属性に格納されている、DataTransferオブジェクトメソッド「setData(type,data)」を使用します。

第1引数はデータの種別を識別する文字列です。データ種別には、MIMEタイプに準じた形式の「text/plain」「text/uri-list」「text/html」が使用できます。しかし現在、Drag and Drop APIを実装しているブラウザで共通して使用可能なのは、古い版の規格で定義されていた、「Text」と「URL」だけです。

既定の動作によって自動でデータが格納された場合、選択文字列ではデータ種別「Text」としてその選択文字列が格納されます。リンクでは、データ種別「URL」としてhref属性で設定されたurlが格納されます。画像では、データ種別「Text」としてsrc属性で設定されたurlが格納されます。

実装されているデータ種別は以下の通りです。(現時点での最新のバージョンの状態。未実装のOperaWindows版でgetData(type)、setData(type,data)の実装が不完全なSafariは除いてあります)

タイプIEFireFoxChrome内容
テキストText要素の文字列
text
text/plain
アドレスURLurl。text/uri-listは改行区切りで複数のurlを含むことができる
url
text/uri-list
HTMLtext/html要素のhtml文字列

第2引数には受け渡すデータを設定します。データは文字列でなければいけません。DataTransferオブジェクトには、第1引数で設定したデータ種別ごとにデータが格納可能です。すでに存在するデータ種別にデータを設定すると上書きされます。

ドロップ時のデータの読み込みは以下のようにします。

// targetはドロップ先の要素
target.ondrop = function(event){
   var id =  event.dataTransfer.getData("text/plain"); 
   target.innerHTML = id;
   // ドロップ後の既定の処理をキャンセル
   event.preventDefault();
}

ドロップイベントの引数として渡されるeventオブジェクトのdataTransfer属性には、DataTransferオブジェクトが格納されており、これはドラッグ開始時のものと同一のデータを参照しています。読み出しにはメソッド「getData(type)」で、データの種別を指定して読み出します。

どのようなデータ種別のデータが格納されているかは、dataTransfer属性のtypes属性にデータ種別の配列として格納されています。ただし、IEはtypes属性に未対応です。

WindowsSafariでは上記の方法は「getData(type)」の実装が完全ではないため機能しません。「setData(type,data)」「getData(type)」を使用せず、ondragstart時にデータを自作のオブジェクトに保持し、ondrop時にそのオブジェクトを参照する方式で実装する必要があります。

関連項目

関連する項目はありません)



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年3月29日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2023 GRAS Group, Inc. All rights reserved.