将叶标记拖动到地图外部
将叶标记拖动到地图外部
提问于 2016-11-20 07:41:33
我在我的ASP.NET MVC5应用程序中使用了叶子标记。
我需要将应用程序外部的标记拖到一个div元素中，在那里我想获取它的id以执行进一步的操作。
marker=new L.marker([latNumber,longNumber], {draggable:'true'});
marker.id = "ABC";
$('#'+ marker.id).draggable(); // draggable jquery UI
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
marker.setLatLng(position,{draggable:'true'}).bindPopup(position).update();
});另一方面，我使用jquery UI的droppable元素
$("#navs").droppable({
drop: function (event, ui) {
alert('dropped')
}
});当我将navs元素放在它上面时，它不会出现drop事件。我需要做哪些改变才能让它工作。
如果有人能进一步解释this，也会有很大的帮助。
回答 2
Stack Overflow用户
发布于 2017-06-23 09:35:17
实际上，似乎有一种变通方法。将标记添加到地图后，叶标记将事件称为"add“，并变为可见。在这种情况下，您可以在对应于该标记的图标上初始化可拖动对象。
m=L.marker([lat,lng],{
title:title,
draggable:true
});
m.on("add",function(){
$(this._icon).data("marker",this);
$(this._icon).draggable({
appendTo:"body",
helper:"clone",
zIndex:1000
});
});在传单面板外部拖动时需要使用"appendTo“。zIndex应该比leaflet地图的zIndex高(不确定它是否被修复，在我的页面上是600 )。你可能需要一个辅助功能来复制一个图标，我已经定制了我的辅助功能(标记可以通过数据“标记”来访问)。
我在小叶1.0.3中使用了这一点。
Stack Overflow用户
发布于 2016-11-20 15:42:34
不能将传单标记拖动到地图外部。
标记的可拖动选项和jQuery的可拖动概念是完全不同的。
如上所述，您可以通过使用标记的图像并将其放置在地图上来假装标记被拖动:它不是地图的一部分，但它看起来像(这就是您提到的链接所指的)
<div>
<div id='map'></div>
<img style="position: absolute; left: 300px; top: 200px; z-index: 1000" id="fakeMarker" src="https://unpkg.com/leaflet@1.0.1/dist/images/marker-icon.png"></img>
</div>
<ul id="liste">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<div id="log"></div>
<script>
$( function() {
$("#fakeMarker").draggable();
$( "#liste li" ).droppable({
accept: "#fakeMarker",
drop: function( event, ui ) {
$( "#log" ).html("dropped on " + $(this).html());
}
});
} );
</script> 下面是一个示例：https://yafred.github.io/leaflet-tests/20161120-drag-and-drop-outside-map/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40701763
复制相关文章
![echarts中国地图如何标记散点图[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/d6d4241c4c7541f563274f8d46b2bd35.png)
相似问题
将地图从列表线单叶地图拖动到所选标记
将标记从地图外部拖动到html元素
未显示叶地图和标记
谷歌地图自定义标记不可拖
如何将叶控制层移动到上面的地图？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
