Help us understand the problem. What is going on with this article?

画像をドラッグアンドドロップしてドロップ先の画像を変える

More than 1 year has passed since last update.

はじめに

これはSLP KBIT Advent Calendar 2018 11日目の記事です。
今回初めて書きます。よろしくお願いいたします。

イー〇イ可愛いですよね。このイーブ〇は様々な種類に進化しますが、どの子が一番好みでしょうか? というわけで、HTML上で進化させたり退化させたりしてみます。

仕様

キャプチャ.PNG

さすがに本家は使えないので上の小さい画像を石、下の画像をモンスターと思ってください。
石の画像をドラッグできるようにして、モンスターの画像をドロップ先に指定します。
そして、ドロップさせた画像によってモンスターの画像が変更されます。
具体的に言うと、炎をドロップするとブース〇ーに、雷をドロップするとサンダー〇に、水素水をドロップするとシャワー〇に、アリスをドロップすると、日中はエ〇フィに、夜は〇ラッキーに、ただの石をドロップすると、〇ーブイに戻ります。ちなみに炎をドラッグアンドドロップすると以下のようになりまふ。
キャプチャ1.PNG

以下、石の画像の動作、モンスターの画像の動作を分けて説明します。

石の画像の動作

html側の動き

home.html
   <span id="rock" draggable="true">
      <img  src="img/fire.png" width="100px" height="50px">
      <img  src="img/kaminari.png" width="100px" height="50px">
      <img  src="img/suisosui.png" width="100px" height="50px">
      <img  src="img/alice.png" width="100px" height="50px">
      <img  src="img/nochangerock.jpg" width="100px" height="50px">
   </span>

まず、htmlファイル側でdraggabletrueにして、画像を動かせるようにします。また、写真全体を id=rock にしておきます。

js側の動き

myscript.js
var koko="";
//条件分岐のための配列
var imgr = new Array();
imgr[0] = "nochangerock.jpg";
imgr[1] = "kaminari.png";
imgr[2] = "fire.png";
imgr[3] = "suisosui.png";
imgr[4] = "alice.png";

document.getElementById("rock").ondragstart = function(e){
    koko = e.target.currentSrc.split("/").pop();
    console.log(koko);   //ログがちゃんと取れているかの確認用  
}

(このあたりは上の人間から助言をいただきました)
画像を動かし始めたら関数を実行し、その画像のlogをとります。また、これを後述のswitch文で分岐条件として使います。しかし、そのまま使うと長いので、split()pop()の合わせ技を使い、logの一番最後の「/」以降のみ取り出して格納するようにしました。そのため、配列に石の画像のファイル名を格納しています。

モンスターの画像の動作

html側の動き

home.html
<div
    ondrop="changeIMG();event.preventDefault();"
    ondragenter="event.preventDefault();"
    ondragover="event.preventDefault();">
    <img id="gazo" src="img/dog.png" width="30%" class="pull-left">
</div>

ondrop時にモンスターの画像を変更するchangeIMG()を実行します(説明はjs側の動きで)。また、event.preventDefault()は一応付けておいた、程度のものです。cssも使いましたがあんまり関係ないので割愛。

js側の動き

myscript.js
//画像の場所を格納させる関数(今回はthisを使いたかっただけ)
function Picture(n){
    this.n = new Image();
    this.n.src = n;
}

//画像への場所のための配列
var img = new Array();
img[0] = new Picture("img/dog.png");
img[1] = new Picture("img/dragon_yellow.png");
img[2] = new Picture("img/dragon_red.png");
img[3] = new Picture("img/dragon_blue.png");
img[4] = new Picture("img/dragon_black.png");
img[5] = new Picture("img/dragon_white.png");

//html上のモンスターの画像の変更処理
function changeIMG(){
    switch(koko){                            //"koko"については石の画像の動きの説明を参照
        case imgr[0] : document.getElementById("gazo").src=img[0].n.src; break;
        case imgr[1] : document.getElementById("gazo").src=img[1].n.src; break;
        case imgr[2] : document.getElementById("gazo").src=img[2].n.src; break;
        case imgr[3] : document.getElementById("gazo").src=img[3].n.src; break;
        case imgr[4] : timeChoice(); break; //こいつだけさらに時間分岐
    }
}

//時間分岐用の変更処理
function timeChoice(){
    var now = new Date();
    if(now.getHours() >= 17 || now.getHours() < 5) {
        document.getElementById("gazo").src=img[4].n.src;
    }else{
        document.getElementById("gazo").src=img[5].n.src;
    }

}

今回、自分のお勉強のためにプロトタイプオブジェクト(あってるかな…)を使って画像データを格納していきました。
changeIMG()について、switch文で分岐して画像変更を行うようにしています。石の画像の動きで説明したlogを使って分岐を行っています。一番最後だけさらに時間による分岐を行っています。

終わりに

もっと行数かかるかなと思ったけど、割と短く書けて驚きました。(まあ、普通に画像1枚を自由に動かしてドロップ先にドラッグした画像を置きっぱなしにしようと思うと、100行近くかかるんですが…)

コードはgithubに載せております。

一か所文末の終わり方がおかしかった部分があると思いますが、誤字ではないのでご安心を。ゆるーくボケてみただけです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした