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{・・・

})