Node.js Express JavaScript とある処理をするごとにサーバーから次の画像を表示させたい

Question

前提・実現したいこと

例えばですが、一枚画像が表示されているとします。
その画像を隣の枠にドラッグ＆ドロップしたとします。
そうしたら、表示されていた画像を消し、次の画像をサーバーから読み込んで表示する、
というのを繰り返し行いたいと考えています。
この、次の画像を読み込んで表示させるところをどのように実装すべきか悩んでいます。

参考

https://www.youtube.com/watch?v=rfNm-Di6oaA
https://www.html5rocks.com/ja/tutorials/dnd/basics/

こちらはTinderですが、この場合だと５枚程度読み込んで終わりになっているのでちょっと違います。
一気に複数枚読み込むのではなく、１枚ずつ読み込みたいです。

画面遷移せずに読み込みたいのですがそれはできないのでしょうか？
できないのでしたらやはり複数枚読み込んでおいて、まだ読み込みたい時は、ボタンなどを配置して置くという方法
しかないのでしょうか？

追記

この画像のようにdstを複数設置する場合を考えた時に同じidが複数存在してしまうのでうまく画像が切り替わりませんでした。
しかし、以下のようにするとうまくいきます。

<div class="dragdrop">
<div id="dropArea1" droppable>
  ここに画像をドロップしてください
</div>
<img id="dispImg" draggable src="http://robohash.org/1.png?size=200x200"></img>
<div id="dropArea2" droppable>
  ここに画像をドロップしてください
</div>
</div>

let next = 1;
dispImg.ondragstart = evt => {
  evt.dataTransfer.setData('text', dragImg.src);
}
dropArea1.ondragover = evt => evt.preventDefault();
dropArea1.ondrop = evt => {
  dstImg.src = evt.dataTransfer.getData('text');
  next++;
  dispImg.src = `http://robohash.org/${next}.png?size=200x200`;
}

dstが２個とかなら書いても良いとは思いますが、想定では９個とかになるのでコードがスマートではありません。
どうにかして綺麗に書くことはできないでしょうか？
ちなみにどのdstかによってdbの処理が変わってくるのでどのdstか分かって置く必要があります。
素直に書いた方が良いのでしょうか？

Answer 1

枠にdropイベントハンドラー(ondrop)を設定しておき、ドロップされたら画像を表示するほうの<img>(dispImg)のsrcを変更すればいいのでは？

waku.ondrop = evt => {
   dispImg.src = '次の画像のURL';
};

Expressのほうは、一番簡単なのは、静的ファイルを用意しておけばいいでしょう。

// Express
app.use('/static', express.static('img')); 

サンプル

Comments

[_Victorique__]

回答ありがとうございます！
ondropで次の画像を表示させると移動した場所に表示されてしまいませんか？
やりたいことを詳しく言いますと、画像をドラッグ&ドロップしたら、移動した場所の画像は消す（非表示？）にして移動元に新しく画像を表示させたいです。可能ですか？

[turbgraphics200]

移動した場所というが理解できないですけど、ページ遷移ということですか？

[turbgraphics200]

サンプル組んでリンクを回答に追加しました。

[_Victorique__]

サンプルまで示していただいてありがとうございます！
まさしくこれです！
参考にさせていただきます！

[_Victorique__]

すみません、追記しましたのでそちらにも回答していただけるとありがたいです！