将传单标记拖到地图外答案

【问题标题】：Drag leaflet marker outside map将传单标记拖到地图外
【发布时间】：2017-06-23 17:35:16
【问题描述】：

我在我的 ASP.NET MVC 5 应用程序中使用传单标记。

我需要将应用程序外部的标记拖到一个 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 的可放置元素

  $("#navs").droppable({
        drop: function (event, ui) {
            alert('dropped')
        }
    });

当我将 navs 元素放在它上面时，我没有得到它的 drop 事件。我需要做哪些改变才能让它发挥作用。

如果有人可以进一步解释this，那也将有很大帮助。

【问题讨论】：

标签： jquery-ui drag-and-drop leaflet

【解决方案1】：

实际上，似乎有一种解决方法。传单标记在标记添加到地图后调用事件“添加”并变为可见。在这种情况下，您可以在与该标记对应的图标上初始化一个可拖动对象。

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 应该高于传单地图 zIndex （不确定是否已修复，在我的页面上为 600）。可能，您需要一个辅助函数来复制图标，我已经自定义了我的辅助函数（标记可通过数据“标记”访问）。

我已将其与传单 1.0.3 一起使用。

【讨论】：

【解决方案2】：

您不能将传单标记拖到地图外。

标记的可拖动选项和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/

【讨论】：

我收集了带有不同 GPS 位置的标记，而不是单个标记。