HTML5 API　要素（画像）を要素（画像）内にドラッグ＆ドロップ配置したい

前提・実現したいこと

HTML5のAPIで、要素をドラッグ＆ドロップできることを知り、画像内に画像を配置できるものを作りたい。
（室内に物を配置してイメージできるもの）

・ドロップ先画像（室内画像）に、ドラッグ画像（花画像）を配置する。
・花のサイズ指定方法
・花画像にリンクを貼りたい
・花画像は複数置きたい
・初期セットは花を部屋画像の下に並べて配置したい

発生している問題・エラーメッセージ

初級者のため、どの部分を画像指定に替えて、どのようにサイズ指定をすればよいかなど、わかりませんでした。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <script type="text/javascript">

        // ドラッグ開始時にデータの値を設定する
        function DragStart(event) {
          event.dataTransfer.setData("text", event.target.id);
        }
         
        // ドロップ時に元のドラッグ値を取得し、現在の要素上に入れ子で保存する
        function Drop(event) {
          var id = event.dataTransfer.getData("text");
          var elm = document.getElementById(id);
          event.currentTarget.appendChild(elm);
          event.preventDefault();
        }
         
        // ブラウザ標準のドロップ動作をキャンセル
        function DragOver(event) {
          event.preventDefault();
        }
    </script>
    <meta charset="UTF-8">
    <title>HTML5</title>
    <style>
    div.draggable {
        width:100px;height:50px;background-color:red; padding: 10px; margin:10px; color: white;
    }
    div.droppablea {
        width:250px; height:100px; padding:10px; color: white;
    }
    div.droppable {
        width:250px; height:130px; background-color:blue; padding:10px; color: white;
    }
    </style>
</head>
<body>
    <h1>Drag & Drop Sample</h1>
    <div  class="droppablea" id="drop" ondragover="DragOver(event)" ondrop="Drop(event)" >
        <div class="draggable" id="a" draggable="true" ondragstart="DragStart(event)" >
            ドラッグできます
        </div>
    </div>
    <div id="drop" class="droppable" ondragover="DragOver(event)" ondrop="Drop(event)" >
      ここにドロップしてください。
    </div>
</body>

</html>

試したこと

文字部分はとりあえず残し、draggablem droppablea, droppableのところを色々入れたり差し替えたりしてみましたが、わかりません・・・。初歩で申し訳ございませんが、教えてください。
入れたい画像：https://www.rannohana.com/data/rannohana/image/kirinukiran2.png
ドロップ先の画像：https://www.rannohana.com/data/rannohana/image/washitsu1.jpg