HTML5のdrag系イベントで、ドラッグ中の画像上(コンテンツ上)のマウス位置を拾いたい
久々に技術の話。わかりやすい回答がなかったので後の人のために書くよ。
簡単に言えば画像Aをドラッグして画像Bにドラッグオーバーしているとき、マウス位置によってうんたらかんたらするようなコードを書くことになったんだけど、
「マウス位置 javascript」でgoogle先生にお伺い立てても、mousemoveしか出てこなかった。正解はdragイベントでした。
画像Bにオーバーしているときのマウス位置の取得をしたいので、google先生のいうとおり
dragoverと思って実装したんだけど、dragoverではe.pageYができなかった。要素に位置情報なかった。
ただしオーバーしてる画像の位置は$(this).position().topで取得できたので、あとはこれに現在のマウス位置を合わせればできるかなーとmousemoveイベントを入れてマウス位置を取得しようとしたんだが・・・
なんとmousemoveはドラッグの時にはイベントはっせいしなかった。そりゃそうだと思ったが知らなかった・・・
で、散々検索してdragイベントならe.pageYを取れることが判明したのが今。dragenterとかずっと見てたのにdragにたどり着くのに3時間かかった・・・
よって最終的にはこうなった(jqueryなくてもできるけどありの書き方で)
var pageY = 0; document.addEventListener("drag",function(e){ pageY = e.pageY; }); $("#tableBlock li").on('dragover', function() { over = "on"; overY = pageY-$(this).position().top; //高さ半分以上の位置なら if(){・・・ //高さ半分以上の位置なら else{・・・ })