如何配置拖动图像映射的起点？(How to configure the starting point

我有以下的情况（请参见下面的图像阅读以下内容后）：

1. .dragoverlay （ 白色矩形图像）为（jQuery的）可拖动的div。 它的尺寸为浏览器窗口相同。
2. .items （在图像的红色小正方形（S））是大小为0x0的绝对定位的div。
3. 淡蓝色的 items正方形绝对定位的div与内部的图像和位于内 .items 。
4. 深蓝色的多边形是属于项目图像映射。

目前，我有以下的HTML：

<style type="text/css">
    div.items {
        position:absolute;
        z-index:98;
    }

    div.dragoverlay {
        position:absolute;
        z-index:97;
        background-image:url('../img/transparentpixel.gif');
    }

    div.item {

    }
</style>

<div class="dragoverlay" style="cursor:move;"></div>
<div class="items">

     <!-- this content is variable -->

       <!-- this is one item-->
       <div id="XX" style="position:absolute;left:XXpx;top:XXpx;"><img src="XX" usemap="#mapid" /></div>
       <map name="mapid" id="mapid"><area shape="poly" style="cursor:pointer;" coords="XX" href="#" onclick="javascript:alert(\'hello\')" /></map>
     <!-- this content is variable -->

</div>

当白.dragoverlay拖动，红色.items相应地移动。 需要此设置。

我如何使用淡蓝色区域中的项目（外面每蓝色图像映射）为起点的拖动？ 至于如果用户点击.dragoverlay区...

Answer 1:

我结束了把一个1x1透明GIF与所述dragoverlay物品的宽度/高度。 我把这个图像映射图像上（所以它是dragoverlay内），然后预期的行为轮番上涨。

文章来源: How to configure the starting point for dragging on an imagemap?