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

问题

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

.dragoverlay (white rectangle in image) is a (jQuery) draggable div. it's the same size as the browser viewport.
.items (small red square(s) in image) is an absolutely positioned div of size 0x0.
The light blue items squares are absolutely positioned divs with an image inside and are located within .items.
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...

回答1:

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.

来源：https://stackoverflow.com/questions/2173391/how-to-configure-the-starting-point-for-dragging-on-an-imagemap

标签

jquery

html

css

draggable