地図の外にリーフレットマーカーをドラッグ

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

は、私はそれの上にドロップしたとき、私はたNAV要素にイベントを落としません

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

jqueryのUIのドロップ可能要素を使用しています。私がそれを機能させるために必要な変更。

さらに誰かがthisを説明できる場合は、大きな助けにもなります。

Answer 1

マップの外にリーフレットマーカーをドラッグすることはできません。

マーカーのドラッグ可能オプションと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/

Answer 2

実際には、回避策があるようです。リーフレットマーカーは、マーカーがマップに追加された後でイベント「追加」を呼び出し、表示されます。その場合、そのマーカーに対応するアイコン上でドラッグ可能なオブジェクトを初期化することができます。

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でそれを使用しました。