解决这个图片的问题？

Question

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

1. .dragoverlay（白色矩形图像）是（jQuery的）可拖动DIV。它与浏览器视口的大小相同。
2. .items（小红色方（一个或多个）图像）是大小为0x0的绝对定位的div。
3. 的lightblueitems正方形绝对定位的div与内部的图像和位于内.items。
4. 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

最后我把一个1x1透明GIF用在dragoverlay项目的宽度/高度。我把图片放在这个图片上（这样它就在dragoverlay里面），然后就会出现预期的行为。