解決這個圖片的問題？

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裏面），然後就會出現預期的行爲。