Question

我在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的droppable元素

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

当我把它放在它上面时，我不会在navs元素上掉落事件。我需要做些什么改变才能使它发挥作用。

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

Answer 1

实际上，似乎有一种解决方法。传单标记称为事件＆＃34;添加＆＃34;将标记添加到地图后，变为可见。在那种情况下，您可以在与该标记对应的图标上初始化可拖动。

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
    });
 });

＆＃34; appendTo＆＃34;在小叶面板外拖动是必需的。 zIndex应该高于传单映射zIndex（不确定它是否已修复，它在我的页面上为600）。可能你需要一个辅助功能来复制一个图标，我已经定制了我的助手（标记可以通过数据访问＆＃34;标记＆＃34;）。

我用传单1.0.3。

Answer 2

您无法在地图外拖动Leaflet标记。

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

在地图外拖动传单标记

2 个答案: