人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Gmailのように、エクスプローラからファイルをドラッグしてブラウザの上まで移動した時にJS関数を発動させる方法はありますか?

Gmailにドラッグ・アンド・ドロップでファイルを添付する機能がありますが、エクスプローラからファイルをドラッグして、カーソルがgmailの画面上に乗ったとき、ドラッグすべき場所が灰色の点線で囲われて「ここにファイルをドロップ」というメッセージが表示されます。

おそらく何らかのJS関数で実現されている機能だと思うのですが、これと同様の機能を実現する方法を教えていただきたいです。

●質問者: fumoto444
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy

ネイティブなコードで書くならこちらが参考になります。

dragenter、dragover、dragleave イベント ハンドラを使用すると、ドラッグ プロセス中に視覚による追加的な合図を提供することができます。たとえば、ドラッグ中にカーソルが列に移動されるとボーダーを点線にするということが可能になります。これによって、列もドロップ ターゲットであることをユーザーに示すことができます。

ネイティブ HTML5 ドラッグ&ドロップ - HTML5 Rocks


jQueryならこちら。

Draggable要素をドロップできるようにします。 ドロップを受け入れるDraggable要素を指定することができます。

Droppable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace

cawbridge2013さんのコメント
ドラッグ&ドロップってHTML5のネイティブサポートじゃないって書いてる。 いまはブラウザ各社が勝手に載せてる状況だから、正式サポートになったら、全部ソースを書き換える必要がありそう。 僕ならjQueryで実現したい。

TransFreeBSDさんのコメント
jQuery UIのはjQuery UIでDraggableにした要素、つまりHTML要素が対象なだけで今のところファイル等には対応してないっぽいです。

Lhankor_Mhyさんのコメント
いえ、ドラッグアンドドロップはHTML5ネイティブの仕様です。W3Cで固まってますから大丈夫ですよ。 http://www.w3.org/TR/2012/CR-html5-20121217/ ↑の 7.7 Drag and drop を参照してください。HTML5ネイティブのドラッグアンドドロップを採用するかどうかについては、IE10で対応されましたし、Chromeなどのwebkit系、Firefoxなどのmozilla系は対応済みですから、IE9-をどうするかという問題です。

Lhankor_Mhyさんのコメント
おっと、別コメントを挟んじゃった。

Lhankor_Mhyさんのコメント
ああ、そうですね。質問はファイルが対象でした。HTML5でしか対応できません、失礼しました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ