如何配置在图像地图上拖动的起点？答案

【问题标题】：How to configure the starting point for dragging on an imagemap?如何配置在图像地图上拖动的起点？
【发布时间】：2010-01-31 21:20:15
【问题描述】：

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

.dragoverlay（图像中的白色矩形）是一个（jQuery）可拖动的 div。它与浏览器视口的大小相同。
.items（图像中的小红色方块）是一个绝对定位的 div，大小为 0x0。
浅蓝色 items 方块是绝对定位的 div，里面有一个图像，位于在 .items。
深蓝色多边形是属于项目的图像映射。

我目前有以下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区域...

【问题讨论】：

标签： jquery html css draggable

【解决方案1】：

我最终在 Dragoverlay 中放置了一个 1x1 透明 gif，其中包含项目的宽度/高度。我将图像映射放在这个图像上（这样它就在 dragoverlay 内），然后出现了预期的行为。

【讨论】：