Question

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

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

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

alt text http://i50.tinypic.com/2wd673p.jpg

Answer 1

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

解决这个imagemap问题？

1 个答案: