タケノコ移動
<div id="app">
<img src="../../タケノコ.jpg" id="noko" width="30px">
<img src="../../タケノコ.jpg" id="noko2" width="30px">
</div>
<script>
//タケノコの絵を動かせるようにします。
let noko1 = document.getElementById("noko");
noko1.style.position = "absolute";
noko1.style.top = 30 + "px";
noko1.style.left = 250 + "px";
//タケノコ2の絵を動かせるようにします。
let noko2 = document.getElementById("noko2");
noko2.style.position = "absolute";
noko2.style.top = 30 + "px";
noko2.style.left = 50 + "px";
//noko1.onmousemove ここを変更******************************************************
noko1.onmousedown =function(e){
noko(noko1);}
//noko1.onmousemove ここを変更******************************************************
noko2.onmousedown =function(e){
noko(noko2);}
//-------------------------------------------------------------------------
function noko(noko){
//ドラッグのはじめ何もしません。
noko.ondragstart = function(event){
return false;}
//左クリックしたときの操作です。
noko.onmousedown = function(event){
//マウスの動きを見ます。
document.addEventListener("mousemove",onMouseMove);}
//マウスの動きにノコの場所を合わせます。
let onMouseMove = function(event){
let x = event.clientX;
let y = event.clientY;
let width = noko.offsetWidth;
let height = noko.offsetHeight;
noko.style.top = (y-height/2) + "px";
noko.style.left = (x-width/2) + "px";
}
//マウスの左ボタンが離れたら動きを見るのをやめます。
noko.onmouseup = function(event){
document.removeEventListener("mousemove",onMouseMove);
}
}
</script>