マウスとタッチ移動 Pointer

id:aと座標
・注意　pointerdown で、xx=e.target.offsetLeft により、もと位置記録。戻り用。
・img id="img1" , div id="img2" , div id=img3" src , ... の4個の img,svg,div clip OK。
・e.target.style.left = e.target.offsetLeft + e.movementX + 'px'で移動。
・e.target.setPointerCapture(event.pointerId) ;　注意：img style={touch-action: none}を追記必要。
・function down(e){ の形にする。また、addEventListenerは複数重ねて使用可能。
・this=e.target --- . の前についているオブジェクトを指す。

addEventListenerを先読でf1を設定...tagでは、onpointermove="f()" on付け

(document.getElementById("p"+1)).addEventListener("pointerdown",f1,false);
p1.addEventListener("pointerdown",f1,false);//p1:Object & id 、複数設定可能。
p1.removeEventListener("pointerdown",f1,false);//解除、()の中は同一のこと。
---------
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