jquery - 特定の x 座標と y 座標で画像の上に画像を追加する方法

Question

ゲーム用のドラッグ可能なマップを作成しています (マップは学校のプロジェクトとして開始され、ゲームに移行しています) マップのリンクはこちら

マップがコンテナー内のどこにドラッグされても、特定の場所でこの画像の上に 2 番目の画像を追加したいと思います。

ここにjqueryがあります：

$(function() { 
    $("#map").draggable({
        cursor: 'move',
        containment: [-525, -582, 252, 40]
    });
});

HTML

<div id="mapable" style="position: relative;float:left;height:423px;width:1072px;overflow:hidden;border:1px solid black;">
    <img src="include/map.png" style="display:block;border:1px solid black;position: absolute;" onclick="point_it(event);" class="drag-image" id="map"/>
</div>

すべてのコードの完全なソースについては、ここで表示できます