拖动图像时如何移动位于可拖动图像上的项目

Question

我在div中有一个图像（地图），上面放置了其他图像（标记）。我通过使用JQuery使图像可拖动：

jQuery("#map").draggable();

，并且有效。问题是，当拖动图像时，标记不会随其移动，它们会停留在div中。 我没有JS / JQuery的丰富经验，也没有CSS的丰富经验。如何使标记随图像移动？

这是页面的结构：

<div id="mapDiv">
    <img src="../data/mappa.jpg" class="map" alt="porto" usemap="#mappa" id="map" />
    <map name="mappa"></map>

    <a id="acol1201" class="point col1201">
       <div>
           <area shape="circle" coords="1663,991,5" href="#" class="mappedpoint" id="col1201">
           <img src="./res/img/icons/green_dot.png" class="marker" id="col1201">
       </div>
    </a>

</div>

和此处的CSS：

img.marker#col1201 {
   top: 991px;
   left: 1663px;
}

#mapDiv {
   position: absolute;
   left: 19vw;
   height: 100%;
   width: 100%;
   overflow-x: scroll;
   overflow-y: scroll;
   margin: 0;
   width: 81%
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
}

#map {
    padding: 0;
}   

.marker {
    position: absolute;
    cursor: pointer;
}