如何配置在图像地图上拖动的起点? [英] 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(图像中的白色矩形)是(jQuery)可拖动的div.它与浏览器视口的大小相同.
2. .items(图像中的小红色正方形)是尺寸为0x0的绝对定位的div.
3. 浅蓝色 items正方形是绝对定位的div，其中包含图像，并且位于 内..items.
4. 深蓝色多边形是属于这些项目的图像映射.

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 items 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.

我目前有以下html:

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>

当拖动白色.dragoverlay时，红色.items会相应移动.此设置是必需的.

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

如何将项目中的浅蓝色区域(在每个蓝色图像贴图的外部)用作拖动的起点?就像用户单击.dragoverlay区域...

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...

推荐答案

我最终将1x1透明gif和项目的宽度/高度放在了dragoverlay中.我将图像映射图放在此图像上(以便它位于拖动叠加层之内)，然后出现预期的行为.

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.

这篇关于如何配置在图像地图上拖动的起点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！