マウスでお魚を動かしたいのですが。。。
ドラッグアンドドロップでお魚を別のdivコンテナへ
移動先のdivコンテナの中でドラッグしてお魚を移動させるという練習プログラムを書いています。
実現したいこと
お魚のpngが3つあるのですが、クリックしたお魚をドラッグアンドドロップできるようにしたいのですがうまい方法が見つかりません。
発生している問題・エラーメッセージ
変数sakanaの中にimg要素のdragid,dragid2,dragid3を入れていきたいのですが、うまく切り替える方法はないでしょうか。
javascript
1let target = ""; 2const dragid = document.getElementById('dragid'); 3const daragid2 = document.getElementById('dragid2'); 4const daragid3 = document.getElementById('dragid3'); 5 6const dropbox = document.getElementById('dropbox'); 7 8let sakana = dragid; 9 10/*dragid,dragid2,dragid3をクリックすると変数sakanaに入るようにしたい */ 11//上のdivから下のdivへドラッグアンドドロップ 12window.onload = function () { 13 sakana.addEventListener('dragstart', function (element) { 14 target = element.target; 15 }, false); 16 17 dropbox.addEventListener('dragover', function (element) { 18 element.preventDefault(); 19 }, false); 20 21 dropbox.addEventListener('drop', function (element) { 22 element.preventDefault(); 23 element.target.appendChild(target); 24 drag_fish(); 25 }, false); 26} 27 28//dropboxの中でドラッグ移動 29function drag_fish(){ 30 draggable(sakana); 31 32 function draggable(target) { 33 target.onmousedown = function () { 34 document.onmousemove = mouseMove; 35 }; 36 document.onmouseup = function () { 37 document.onmousemove = null; 38 }; 39 40 function mouseMove(e) { 41 var event = e ? e : window.event; 42 // 要素の位置座標を取得 43 var clientRect = dropbox.getBoundingClientRect(); 44 45 // ページの左端から、要素の左端までの距離 46 var px = window.pageXOffset + clientRect.left; 47 48 // ページの上端から、要素の上端までの距離、数字はdivのサイズから画像サイズを引いたもの 49 var py = window.pageYOffset + clientRect.top; 50 target.style.position = 'absolute' 51 if (event.clientY > py && event.clientY < py + 234) { 52 target.style.top = event.clientY + 'px'; 53 } 54 if (event.clientX > px && event.clientX < px + 540) { 55 target.style.left = event.clientX + 'px'; 56 } 57 } 58 } 59}
こちらはHTMLとCSSです
dataインデックスなども使えないかといろいろ試してimgの要素がカオスになっていてすみません💦
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="./aqua.css"> 8 <title>水族館</title> 9</head> 10<body> 11 <div class="container"> 12 <h1>お空にお魚を泳がせよう!</h1> 13 <div class="dragcontainer"> 14 <img id="dragid" data-id="dragid" src="img/kame-l.png" width="160px"> 15 <img id="dragid2" data-id="dragid2" src="img/fish01.PNG" width="160px" height="138px"> 16 <img id="dragid3" data-id="dragid3" src="img/fuku.PNG" width="160px" height="138px"> 17 </div> 18 <div class="dropcontainer" id="dropbox"></div> 19 </div> 20 <script src="js/aqua.js"></script> 21</body> 22</html>
こちらがCSSです。よろしくお願いします。
CSS
1/* CSSのリセット */ 2html, 3body, 4ul, 5ol, 6li, 7h1, 8h2, 9h3, 10h4, 11h5, 12h6, 13p, 14form, 15input, 16div { 17 margin: 0; 18 padding: 0; 19} 20body { 21 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 22} 23button { 24 -webkit-appearance: none; 25 appearance: none; 26 vertical-align: middle; 27 border: 0; 28 background: transparent; 29 padding: 0; 30 margin: 0; 31 outline: 0; 32 border-radius: 0; 33} 34li { 35 list-style: none; 36} 37/*コンテンツ*/ 38.container{ 39 background-color: aquamarine; 40 text-align: center; 41 height: 100vh; 42} 43.dragcontainer{ 44 width: 700px; 45 height: 200px; 46 border: 2px solid black; 47 margin: 10px auto; 48 background-color: white; 49} 50.dropcontainer{ 51 background-image: url("img/sky02.jpg"); 52 width: 700px; 53 height: 394px; 54 border: 2px solid black; 55 margin: 10px auto; 56} 57
試したこと
onclickで変数の要素を切り替えようと思ったのですが、うまくいきませんでした。
dragstartと機能がダブってしまうからでしょうか?
let sakana = dragid; dragid.onclick=function(){ sakana = dragid; } dragid2.onclick=function(){ sakana = daragid2; } dragid3.onclick=function(){ sakana = daragid3; }

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/01/25 16:13