Разрешить перетаскивание через div, расположенный над картой - PullRequest
Новая
       6

Разрешить перетаскивание через div, расположенный над картой

2 голосов
/ 07 апреля 2011

У меня есть карта с открытыми слоями, и я поместил div для размещения внутри / над компонентом карты.

Это работает нормально, однако при перетаскивании карты, если мышь перемещается через / над div, действие перетаскивания прекращается.

Как можно избежать прекращения действия перетаскивания?

спасибо, стр. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>

<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>

<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();

    // put div over map
    Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>

</body>
</html>

РЕДАКТИРОВАТЬ: решение с использованием принятого ответа: 

<div class="mapDragThrough">some content which gets positioned over the map</div>

initialise: function()
{
    this.map.events.register("movestart", this, this.applyDragThrough);
    this.map.events.register("moveend", this, this.applyDragThrough);
},

applyDragThrough: function(event)
{
    var elements = Element.select(document.body, ".mapDragThrough");
    var value = this.map.dragging ? "none" : "auto";
    elements.invoke("setStyle", {"pointerEvents":value});
},

Ответы [ 2 ]

3 голосов
/ 12 мая 2011

Вы можете установить pointer-events css атрибуты overlay DIV на none. Это приводит к тому, что элемент вообще не получает события мыши, что позволяет непрерывно перетаскивать карту.

Вот рабочий пример: 

<html>
<head>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>

<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>

<script type="text/javascript">
    // create map
    var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
    map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
    map.zoomToMaxExtent();

    // put div over map
    Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>

</body>
</html>
0 голосов
/ 17 апреля 2011

Возможным решением может быть прослушивание события при наведении курсора с помощью jQuery и активация / деактивация элемента управления Navigation (или вы, вероятно, используете MouseDefaults, что не следует) соответственно. Код должен выглядеть примерно так: 

var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0]; 

$("#your-overlay-div").hover(function(){
   nav.deactivate();
},function(){
   nav.activate();
});
...