How to configure the starting point for dragging on an imagemap?

i have the following situation (please see image below after reading the following):

1. .dragoverlay (white rectangle in image) is a (jQuery) draggable div. it's the same size as the browser viewport.
2. .items (small red square(s) in image) is an absolutely positioned div of size 0x0.
3. The light blue item开发者_运维知识库s squares are absolutely positioned divs with an image inside and are located within .items.
4. The dark blue polygons are imagemaps which belong to the items.

I currently have the following 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>

When the white .dragoverlay is dragged, the red .items is moved accordingly. This setup is needed.

How can I use the light blue areas in the items (just outside every blue imagemap) as a starting point for dragging? As if the user clicks the .dragoverlay area...

I ended up putting a 1x1 transparent gif with the width/height of an item in the dragoverlay. I put the imagemap on this image (so that it is inside the dragoverlay) and then the expected behavior turns up.