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

ドラッグ&ドロップできるようにするには

ドラッグ&ドロップできるようにするには

解説

要素をドラッグ可能にするにはdraggable属性をtrueにします。選択中の文字列、(src属性を指定された)画像、(href属性を指定された)リンクは既定でドラッグ可能です。

IEはdraggable属性をまだサポートしていないため、既定でドラッグ可能なものしかドラッグできません。

draggable属性の指定例を以下に示します。

<img draggable="true" src="example.jpg">

要素をドロップ先として利用可能にするにはdropzone属性を設定しますが、実装が進んでいないため、ブラウザの既定の動作を変更することで、ドロップを受け付け可能にします。

HTMLの各要素のイベントでは、イベントハンドラで明示的に抑制しない限り、ブラウザ側で定義した既定の処理が呼び出されます。ローカルHTMLファイルドキュメントドラッグ&ドロップするとそのページに遷移したり、リンクの上にカーソル移動するとリンクの色が変化したりするのは、この既定のイベント処理の結果です。

ドロップが既定で無効なのは、この既定のイベント処理の中で、ドロップ受け付けがその都度、無効化されているからです。そのため、ドロップ直前のタイミング(ondragoverイベントハンドラ)で、ドロップを無効にする既定のイベント処理を抑制して、要素へのドロップを有効にします。

また、ドロップを有効にした後に、dropイベントの既定のイベント処理が実行されると、たとえばローカルファイルのドロップによるページ遷移など、予期しない動作が起きる場合があるので、既定のイベント処理は無効にしておく必要があります。既定のイベント処理が実行されないようにするには、イベントハンドラ内で、「event.preventDefault()」メソッドを呼び出します。

必ず、以下のように、ondragoverとondropの両方のイベントハンドラで「event.preventDefault()」を呼び出す必要があることに注意してください。

//targetはドロップ先の要素 

target.ondragover = function(event){
   // ドロップ直前のイベントで既定の処理をキャンセルしてドロップを可能にする
   event.preventDefault();
}
  
target.ondrop = function(event){

   // ドロップ時の処理をここに記述

   // ドロップ後の既定の処理をキャンセル
   event.preventDefault();
}

WindowsSafariでは、上記を行っただけではドロップできません。ドラッグ中に、ドロップしたい要素の上でシフトキーもしくはコントロールキーを押してドラッグ&ドロップの動作モードを変更することで、ドロップ可能になります。動作モードに関しては「ドラッグ&ドロップの効果を指定に応じて変更するには」を参照してください。

IEではセキュリティの設定によって既定の動作を変更できないか、ダイアログによって許可を求められる場合があります。

関連項目




Surface StudioSurface Studio
Microsoftが販売するPC「Surface」シリーズのハイエンドモデル。
Amazon Fire 7Amazon Fire 7
Amazon.comが販売する7インチタブレット。
VAIO Phone AVAIO Phone A
VAIO株式会社が製造するAndroidスマートフォン。

 ・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形式となっている。

2017年5月29日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   スワイプ  (用語辞典)
ランキング4   リーンスタートアップ  (用語辞典)
ランキング5   コンテキスト  (用語辞典)
ランキング6   バリデーション  (用語辞典)
ランキング7   ハードコピー  (用語辞典)
ランキング8   輻輳  (用語辞典)
ランキング9   ウォーターマーク  (用語辞典)
ランキング10   メンション  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.