・注意 function down(e){ の形にする。また、addEventListenerは複数重ねて使用可能。
・div id="p1" , div id="p2" src , ... img id="p4" の4個 の div img,clip,img OK。
・pointerdown で、xp=e.pageX-e.target.offsetLeft;//("px" なし) により、div相対座標を取得 (タッチずれ防止)
・pointerdown で、x0=e.pageX ...("px" なし) により、もと位置記録。pointerupで戻る時使用。
・e.target.style.left = (e.pageX - xp) + 'px'で移動。xpは タッチmoveずれ防止... this=e.target
・e.target.setPointerCapture(event.pointerId) ; 注意：img style={touch-action: none}を追記必要。
・zIndex:1;で、移動move時のみ style.zIndex=2 にして imgを上に表示。あとは１に戻す。事前に positionプロパティ必要。
・注意 clickは、ボタンを押して離した時に発火。Pointerはマウスカーソルやスマホのタッチを開始した時や離した時に発火。
・PC系ブラウザのPointerとMouseは動作が同じが、AndroidのTouchとPointerが異なることあり注意。
by
https://morinokabu.com/2026/02/07/javascript-mouse-coordinates-properties/
addEventListenerで f1を設定...tagでは、onpointermove="f()" on付け
(document.getElementById("p"+1)).addEventListener("pointerdown",f1,false);
p1.addEventListener("pointerdown",f1,false);//p1:Object & id
p1.addEventListener("pointerup",f1,false);//id に 複数設定可能。false省略可
--------- 以上、script の記入位置に注意
var dd=new Object();//index指定の時。
dd[i]=(document.getElementById("p"+i));//Object
dd[i].addEventListener("pointerdown",f1,false);//複数設定可能。false省略可
functionの書き方
・const ff = (e) => {ooo} ....変数化
・function ff(e){ooo}
・var ff = function(e) {ooo}....変数化
・body onLoad='f()' ..... window.onload = function() {ooo};同じ
・a.innerHTMLも........ a : Object & id
