Как настроить начальную точку для перетаскивания на карту изображения? - PullRequest
Новая
       15

Как настроить начальную точку для перетаскивания на карту изображения?

0 голосов
/ 01 февраля 2010

у меня следующая ситуация (см. Изображение ниже после прочтения следующего):

  1. .dragoverlay ( белый прямоугольник на изображении) - перетаскиваемый элемент (jQuery). это тот же размер, что и в окне просмотра браузера.
  2. .items (маленький красный квадрат (ы) на изображении) - это абсолютно позиционный элемент размера 0x0.
  3. светло-голубые items квадраты являются абсолютно расположенными элементами с изображением внутри и расположены в пределах .items.
  4. Полигоны темно-синего цвета являются картами изображений, которые принадлежат элементам.

В настоящее время у меня есть следующий 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

1 Ответ

0 голосов
/ 04 февраля 2010

В итоге я поместил прозрачный gif 1x1 с шириной / высотой элемента в dragoverlay.Я поместил карту изображения на это изображение (чтобы оно находилось внутри dragoverlay), и затем ожидаемое поведение включается.

...