个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 openlayers map ，我已经将一个 div 定位在 map 组件内部/上方。
这很好用，但是当拖动 map 时，如果鼠标穿过/越过 div，则拖动操作终止。
如何避免拖动操作终止？
谢谢，p。
<!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});
},
最佳答案
您可以将overlay DIV 的pointer-events css 属性设置为none。这会导致该元素根本不接收鼠标事件，从而允许 map 拖动继续不间断。
这是一个工作示例:
<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>
关于javascript - 允许拖动位于 map 上的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5577851/
25
4
0
我有一个 ASP.NET 网站，我希望只允许 AD 组中的用户访问该网站。我正在使用如下的 web.config 片段，但这似乎不起作用:
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
当前有一个Navigator.push(context，route)，但是上下文部分返回了错误，在尝试调试后，我发现问题是因为我在调用一个函数而不是直接将home设置为widget树。但是现在我不确定
这是我的邮政编码正则表达式 ^[a-zA-Z0-9]{1,9}$ 但不允许 A-12345。如何更改 - 也将被允许的正则表达式？ 最佳答案 在字符集的开头或结尾添加-([...]): ^[-a-zA
我目前正在建立我的网站，但遇到了一个问题 JavaScript 中的混合内容阻止 当我尝试加载和显示来自 的图像和页面时，Chrome、Mozilla 和 Explorer 会发生这种情况http 我
我见过使用: [mysqld] bind-address = 255.112.324.12 允许远程访问单个 IP。我如何允许从 mysql 远程访问所有 IP？ 最佳答案 如果你想允许它用于所
我想知道是否可以使用模板实现某些功能。我想要做的是允许特定的“复制构造函数和赋值运算符”从一个模板到另一个模板并禁用其他模板。 我想我只完成了一件我想要的事情，所以我提供了下面的类(class)。对于
这个问题在这里已经有了答案: How to validate an email address in PHP (15 个答案) 关闭 2 年前。 正则表达式让我大吃一惊。我如何更改此设置以验证带有加
解析可以采用以下格式之一的日期的最佳方法是什么 "dd-MM-yyyy HH:mm" "dd/MM/yyyy HH:mm" "dd.MM.yyyy HH:mm" 无需创建 3 个 SimpleD
我们知道，下面的代码格式不正确，因为成员 x 在依赖的基类中。但是，将指定行上的 x 更改为 this->x 将修复错误。 template struct B { int x; }; tem
如果能帮助我理解“Java 并发实践”中的以下内容，我将不胜感激: Calling an overrideable instance method(one that is neither privat
此时如果上传一个不在预定义的安全扩展名列表，如.lrc，会报错： File type does not meet security guidelines. Try another. 解决此问题有
我有一个运行韵律，可以为我的几个域和一个 friend 域处理 XMPP。我 friend 域中的一位用户(他的妻子)想更改她的密码(实际上她忘记了她，所以我会用 prosodyctl 设置一个，然后
使用 nginx，您可以允许和拒绝范围和 ips (https://www.nginx.com/resources/admin-guide/restricting-access/)。使用realip模
什么是一些好的克里金法/插值想法/选项，可以让重度权重的点在绘制的 R map 上的轻权重点上流血？ 康涅狄格州有八个县。我找到了质心并想绘制这八个县中每个县的贫困率。其中三个县人口稠密(约 100
我正在使用 virtualbox + ubuntu + vagrant . 但是我不能ping或 wget任何网址。请指导我如何允许虚拟机访问我的主机的互联网？ 最佳答案 这对我有用。 使用此配置 V
标题可能有点令人困惑，所以让我向您解释一下。 在 Swift 中，我们可以拥有带有默认参数值的函数，例如: func foo(value: Int = 32) { } 我们也可以有 In-Out 参数
有TextView1 和TextView2。 TextView2 应该 float 在 TextView1 的右侧。只要两个 TextView 的总宽度不使 TextView2 与右侧的框重叠，Tex
使用 Magento 收集方法 addFieldToFilter 时是否可以允许按 NULL 值进行过滤？我想选择集合中具有自定义属性的所有产品，即使没有为该属性分配任何值。 最佳答案 您不需要使用
我正试图从 .htaccess 文件中的规则中“排除”一个目录(及其所有文件夹)... 不确定这是否可能？ .htaccess 文件是这样的: Order Allow,Deny Deny from a
我是一名优秀的程序员,十分优秀！