HTML/CSS, jQuery

【jQuery】ドラッグしたまま特定の要素にhoveしたかの情報を取得

WordPressの『メディアを追加』みたいにドラッグで反応させたい

WordPressの『メディアを追加』でファイルをアップロードする際にファイルをドラッグしたままブラウザまで移動すると画面の色が変わって『ファイルをドロップしてアップロード』って表示に変わるけど、

それに似たようなことは出来ないものかと悩んだ結果の覚え書き。

ひとまずドラッグに反応する領域(要素)を決めるHTMLをば

HTMLは簡単にこんな感じ。

HTML

ファイルをドラッグしたままのマウスカーソルが領域内にあるかを判定

現在ドラッグ中で、領域内にマウスカーソルが入ったか、領域から出たか、領域内にドロップしたかを判定する。

スクリプトも単純に。

dnd_check.js

上記スクリプトで付与(または削除)されるクラスによって表示を変更

親要素に .mouse-hoverが付与されたら #drop-areaのスタイルを変更。

style.css

 

とっても簡単なことだけど、Google先生に聞いてもなかなか答えに辿り着けなかったので、実に雑なれど以上が自力でなんとかしてみた結果。

関連記事
ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。