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

我在一个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>

---

一个快速的解决方案是，一旦拖动事件完成，您可以“重新绘制”标记。谢谢。我不知道如何得到图像水平和垂直移动了多少像素。我做了如下尝试：函数dragPointsWithMap（）{

$（“.marker”）.each（函数（索引）{$（this）.css（'top'），（parseFloat（$（this）.css（'top'））+$（“#map”）.offset（）.top）+‘px'）；$（this.css（$（parseFloat（$（this.css（'left'））+$）+$（“#map”）.offset（）.left）+‘px'））；}这会移动点，但它只会水平移动它们，并且相对于地图的移动而言移动太多。我错在哪里？你能用你的代码让我看看吗：）？你能在
#mapDiv
中添加另一个div，但包含所有相关元素，并使其可拖动或使
#mapDiv
可拖动而不是
#map
？
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;
}